/* IArama — tokens du design system */
@font-face { font-family: "Bricolage Grotesque"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/bricolage-grotesque-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Bricolage Grotesque"; font-weight: 800; font-style: normal; font-display: swap; src: url("fonts/bricolage-grotesque-latin-800-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 400; font-style: normal; font-display: swap; src: url("fonts/hanken-grotesk-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 600; font-style: normal; font-display: swap; src: url("fonts/hanken-grotesk-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-weight: 700; font-style: normal; font-display: swap; src: url("fonts/hanken-grotesk-latin-700-normal.woff2") format("woff2"); }

:root {
  --papier: #F4F7FD; --feuille: #FFFFFF; --craie: #E3EAF8;
  --encre: #0F1530; --encre-douce: #44506B; --filet: #D5DEEE; --trace: #7B879E;
  --bleu: #0044CC; --bleu-fonce: #002C99; --bleu-clair: #4D86FF;
  --eclair: #0044CC; --sur-eclair: #FFFFFF;
  --repere: #FFD60A; --sur-repere: #120B2E;
  --nuit: #0A1230; --sur-nuit: #F4F7FF; --sur-nuit-doux: #BFD0F5;
  --niveau-1: #CFE0FF; --niveau-2: #7FA6F5; --niveau-3: #0044CC; --niveau-4: #00297A;
  --alerte: #B3350A; --focus: #0F1530;
  --espace-1: 4px; --espace-2: 8px; --espace-3: 12px; --espace-4: 16px;
  --espace-5: 24px; --espace-6: 32px; --espace-7: 48px; --espace-8: 80px;
  --rayon-sm: 8px; --rayon-md: 16px; --rayon-lg: 28px; --rayon-pilule: 999px;
  --ombre-halo: 0 14px 30px -12px rgba(0, 68, 204, 0.65);
  --ombre-carte: 0 1px 2px rgba(10, 18, 48, 0.05), 0 24px 48px -24px rgba(0, 40, 140, 0.28);
  --font-display: "Bricolage Grotesque", system-ui, sans-serif;
  --font-texte: "Hanken Grotesk", system-ui, sans-serif;
}

body { background: var(--papier); color: var(--encre); font: 400 16px/26px var(--font-texte); }
h1, h2, h3 { font-family: var(--font-display); color: var(--encre); letter-spacing: -0.02em; }
h1 { font-weight: 800; font-size: clamp(32px, 5vw, 44px); line-height: 1.05; letter-spacing: -0.03em; }
h2 { font-weight: 700; font-size: 28px; line-height: 32px; }
a { color: var(--eclair); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* Survol : Hello Elementor force une couleur foncée sur tous les liens ; on la corrige. */
a:hover, a:active { color: var(--niveau-4); }
.d-btn:hover, .d-btn:active, .d-btn:focus, .ia-btn:hover, .ia-btn:active, .ia-btn:focus,
.iarama-header__nav a.d-btn:hover { color: var(--sur-eclair); text-decoration: none; }
.d-btn--repere:hover, .ia-btn--repere:hover { color: var(--sur-repere); }
.d-btn--secondaire:hover, .ia-btn--ghost:hover { color: var(--encre); }
.elementor-button:hover, .elementor-button:focus { color: var(--sur-repere); }

/* Icônes des cinq axes (accueil) : masque SVG sur la pastille de chaque carte. */
.elementor .elementor-element[class*="elementor-element-ia000"] > div[style*="width:56px"]::after{content:"";width:30px;height:30px;background:#fff;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center;-webkit-mask-size:contain;mask-size:contain}
.elementor-element-ia00009 > div::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2 4 14h7l-1 8 9-12h-7z%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M13 2 4 14h7l-1 8 9-12h-7z%22/%3E%3C/svg%3E")}
.elementor-element-ia00013 > div::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2212%22 cy=%225%22 rx=%228%22 ry=%223%22/%3E%3Cpath d=%22M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5%22/%3E%3Cpath d=%22M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cellipse cx=%2212%22 cy=%225%22 rx=%228%22 ry=%223%22/%3E%3Cpath d=%22M4 5v6c0 1.7 3.6 3 8 3s8-1.3 8-3V5%22/%3E%3Cpath d=%22M4 11v6c0 1.7 3.6 3 8 3s8-1.3 8-3v-6%22/%3E%3C/svg%3E")}
.elementor-element-ia00017 > div::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 9l10-5 10 5-10 5z%22/%3E%3Cpath d=%22M6 11.5V16c0 1.5 2.7 3 6 3s6-1.5 6-3v-4.5%22/%3E%3Cpath d=%22M22 9v6%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M2 9l10-5 10 5-10 5z%22/%3E%3Cpath d=%22M6 11.5V16c0 1.5 2.7 3 6 3s6-1.5 6-3v-4.5%22/%3E%3Cpath d=%22M22 9v6%22/%3E%3C/svg%3E")}
.elementor-element-ia00021 > div::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%225%22 cy=%226%22 r=%222.5%22/%3E%3Ccircle cx=%2219%22 cy=%226%22 r=%222.5%22/%3E%3Ccircle cx=%2212%22 cy=%2219%22 r=%222.5%22/%3E%3Cpath d=%22M7.5 6h9M6.5 8l4 9M17.5 8l-4 9%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Ccircle cx=%225%22 cy=%226%22 r=%222.5%22/%3E%3Ccircle cx=%2219%22 cy=%226%22 r=%222.5%22/%3E%3Ccircle cx=%2212%22 cy=%2219%22 r=%222.5%22/%3E%3Cpath d=%22M7.5 6h9M6.5 8l4 9M17.5 8l-4 9%22/%3E%3C/svg%3E")}
.elementor-element-ia00025 > div::after{-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l8 3v6c0 4.5-3.2 8.3-8 9-4.8-.7-8-4.5-8-9V6z%22/%3E%3Cpath d=%22M8.5 12l2.5 2.5 4.5-5%22/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 24 24%22 fill=%22none%22 stroke=%22black%22 stroke-width=%221.8%22 stroke-linecap=%22round%22 stroke-linejoin=%22round%22%3E%3Cpath d=%22M12 3l8 3v6c0 4.5-3.2 8.3-8 9-4.8-.7-8-4.5-8-9V6z%22/%3E%3Cpath d=%22M8.5 12l2.5 2.5 4.5-5%22/%3E%3C/svg%3E")}

/* ===== Design 1.5 : bleu soutenu #0044CC, mise en page plus moderne ===== */
body { background: var(--papier); }
h1 { letter-spacing: -0.035em; }
.d-btn, .elementor-button { box-shadow: var(--ombre-halo); transition: transform .15s ease, box-shadow .15s ease; }
.elementor-button:hover { transform: translateY(-2px); }

/* En-tête : barre collante translucide */
.iarama-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.86); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(213,222,238,.8); }
.iarama-header__nav a:hover { color: var(--bleu); }
.iarama-footer { background: var(--nuit); }

/* Accueil : bandes de couleur */
.elementor .elementor-element.elementor-element-ia00005 { background: radial-gradient(120% 140% at 0% 0%, #0044CC 0%, #0A1230 75%) !important; }
.elementor .elementor-element.elementor-element-ia00001 .elementor-heading-title { color: #fff !important; }
.elementor .elementor-element.elementor-element-ia00002, .elementor .elementor-element.elementor-element-ia00002 p,
.elementor .elementor-element.elementor-element-ia00004, .elementor .elementor-element.elementor-element-ia00004 p { color: #DCE6FA !important; }
.elementor .elementor-element.elementor-element-ia00029,
.elementor .elementor-element.elementor-element-ia00006 .elementor-heading-title,
.elementor .elementor-element.elementor-element-ia00007, .elementor .elementor-element.elementor-element-ia00007 p { color: #DCE6FA !important; }
.elementor .elementor-element.elementor-element-ia00033 { background-color: #fff !important; }
.elementor .elementor-element.elementor-element-ia00030 .elementor-heading-title { color: var(--encre) !important; }
.elementor .elementor-element.elementor-element-ia00031, .elementor .elementor-element.elementor-element-ia00031 p { color: var(--encre-douce) !important; }
.elementor .elementor-element.elementor-element-ia00050 { background: radial-gradient(120% 160% at 100% 0%, #0044CC 0%, #0A1230 70%) !important; }
.elementor .elementor-element.elementor-element-ia00047, .elementor .elementor-element.elementor-element-ia00047 p,
.elementor .elementor-element.elementor-element-ia00049, .elementor .elementor-element.elementor-element-ia00049 p { color: #DCE6FA !important; }

/* Cartes blanches : sans bordure, arrondies, ombre douce */
.elementor .e-con-inner .e-con.e-child[class*="elementor-element-ia000"],
.elementor .e-con.e-child[class*="elementor-element-ia000"] { border-color: transparent !important; border-radius: 28px !important; box-shadow: 0 24px 48px -26px rgba(0,20,90,.55); }
.elementor .elementor-element[class*="elementor-element-ia000"] > div[style*="width:56px"] { background: #0044CC !important; border-radius: 18px !important; }
.elementor .elementor-element.elementor-element-ia00027 p, .elementor .elementor-element.elementor-element-ia00040 p { color: var(--encre-douce); }

/* Niveaux (accueil) : palette bleue */

/* Accueil : les quatre niveaux en escalier ascendant */
@media (max-width: 767px) {
  .elementor-element-ia00032 > div > div:nth-child(2) { flex-direction: column !important; align-items: flex-start !important; border-bottom: 0 !important; gap: 8px !important; }
  .elementor-element-ia00032 > div > div:nth-child(2) > div { height: auto !important; min-height: 0 !important; width: 100% !important; flex: none !important; }
  .elementor-element-ia00032 > div > div:nth-child(2) > div:nth-child(1) { width: 58% !important; }
  .elementor-element-ia00032 > div > div:nth-child(2) > div:nth-child(2) { width: 72% !important; }
  .elementor-element-ia00032 > div > div:nth-child(2) > div:nth-child(3) { width: 86% !important; }
}

/* ===== Le bleu de l'accueil sur tout le site ===== */
body { overflow-x: clip; }
/* Bandeau de titre des pages intérieures et des articles */
.site-main > .page-header, main#content > .page-header, .page-header {
  position: relative; box-sizing: border-box; width: 100vw; max-width: none;
  margin: 0 0 40px calc(50% - 50vw); padding: 56px max(24px, calc(50vw - 560px)) 52px;
  background: radial-gradient(120% 160% at 0% 0%, #0044CC 0%, #0A1230 85%);
}
.page-header .entry-title, .page-header h1 { margin: 0; color: #fff; font-family: var(--font-display); font-weight: 800; font-size: clamp(32px, 5vw, 48px); line-height: 1.08; letter-spacing: -0.03em; }
.page-header .entry-title a { color: #fff; }
.ia-intro { font-size: 19px; line-height: 1.55; color: var(--encre-douce); max-width: 760px; margin: 0 auto 20px; text-align: center; }
/* Pied de page */
.iarama-footer { background: radial-gradient(120% 220% at 100% 0%, #0044CC 0%, #0A1230 75%); }
/* Liens et accents */
.entry-content a:not(.ia-btn):not(.d-btn) { color: var(--bleu); }
.entry-content a:not(.ia-btn):not(.d-btn):hover { color: var(--bleu-fonce); }
::selection { background: #0044CC; color: #fff; }

.iarama-footer__inner{display:flex;flex-wrap:wrap;gap:12px 28px;justify-content:space-between;align-items:center}
.iarama-footer nav{display:flex;flex-wrap:wrap;gap:8px 22px}
.iarama-footer a{color:#DCE6FA}
.iarama-footer a:hover{color:#fff;text-decoration:underline}

/* Escalier « Votre niveau » : le texte est aligné en haut de chaque marche */
.elementor-element-ia00032 > div > div:nth-child(2) > div { justify-content: flex-start !important; }

/* Accueil : texte des cinq cartes aligné en haut */
.elementor-element-ia00028 { align-items: stretch !important; }
.elementor-element-ia00028 > .e-con { justify-content: flex-start !important; align-items: flex-start !important; align-self: stretch !important; }
.elementor-element-ia00028 > .e-con > .elementor-element { width: 100%; margin-top: 0; }

/* Accueil : flèche de progression animée au-dessus des cinq axes */
.ia-fleche { margin: 6px 0 14px; }
.ia-fleche__lab { font: 800 13px/1 var(--font-texte); letter-spacing: .12em; text-transform: uppercase; color: #FFD60A; margin: 0 0 12px; }
.ia-fleche__ligne { display: flex; align-items: center; }
.ia-fleche__barre { position: relative; flex: 1 1 auto; height: 10px; border-radius: 999px 0 0 999px; overflow: hidden; background: linear-gradient(90deg, rgba(255,255,255,.18), #FFD60A); }
.ia-fleche__barre::after { content: ""; position: absolute; top: 0; left: -35%; width: 35%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,.95), transparent); animation: ia-fleche-glisse 2.2s ease-in-out infinite; }
.ia-fleche__pointe { flex: none; width: 0; height: 0; border-left: 26px solid #FFD60A; border-top: 17px solid transparent; border-bottom: 17px solid transparent; animation: ia-fleche-pousse 1.2s ease-in-out infinite; }
@keyframes ia-fleche-glisse { from { left: -35%; } to { left: 100%; } }
@keyframes ia-fleche-pousse { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(8px); } }
@media (prefers-reduced-motion: reduce) { .ia-fleche__barre::after, .ia-fleche__pointe { animation: none; } }

/* Hero : « Pourquoi faire ce diagnostic ? » */
.ia-pourquoi-titre .elementor-heading-title { color: #fff !important; }
.ia-pourquoi ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ia-pourquoi li { position: relative; padding-left: 34px; color: #DCE6FA; font-size: 17px; line-height: 1.5; }
.ia-pourquoi li::before { content: "✓"; position: absolute; left: 0; top: 1px; width: 24px; height: 24px; border-radius: 50%; background: #FFD60A; color: #0A1230; font-weight: 800; font-size: 14px; line-height: 24px; text-align: center; }
.ia-pourquoi p, .ia-pourquoi li { color: #DCE6FA !important; }