/* Ophélie Fender — version tablette et téléphone.
   La maquette est en styles en ligne : chaque règle ici porte !important pour les surcharger.
   Les sections sont ciblées par leur id (accueil : [id="1c"], [id="2a"]… ; pages : #b1, #b2…, #rdv). */

html{-webkit-text-size-adjust:100%}

/* ---------- Menu déroulant (assets/js/menu.js) : caché sur grand écran ---------- */
.of-burger,.of-menu{display:none}
@media (max-width:1024px){
  .of-burger{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:5px;
    position:fixed;top:max(8px,env(safe-area-inset-top));right:12px;z-index:90;width:44px;height:44px;padding:0;
    background:#141414;border:1px solid rgba(255,255,255,.28);cursor:pointer;-webkit-tap-highlight-color:transparent}
  .of-burger span{display:block;width:20px;height:1.5px;background:#fff;transition:transform .35s cubic-bezier(.2,.7,.2,1),opacity .25s}
  .of-menu-open .of-burger span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
  .of-menu-open .of-burger span:nth-child(2){opacity:0}
  .of-menu-open .of-burger span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}

  .of-menu{display:flex;flex-direction:column;gap:32px;position:fixed;top:0;left:0;right:0;z-index:80;
    background:rgba(14,14,14,.97);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    padding:calc(76px + env(safe-area-inset-top)) 24px 32px;box-sizing:border-box;max-height:100svh;overflow-y:auto;
    border-bottom:1px solid rgba(255,255,255,.1);
    transform:translateY(-100%);visibility:hidden;transition:transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s .45s}
  .of-menu-open .of-menu{transform:none;visibility:visible;transition:transform .45s cubic-bezier(.2,.7,.2,1),visibility 0s}
  .of-menu ul{list-style:none;margin:0;padding:0}
  .of-menu li{border-top:1px solid #2e2e2e}
  .of-menu li:last-child{border-bottom:1px solid #2e2e2e}
  .of-menu ul a{display:block;padding:16px 0;font:italic 400 28px/1.15 'Playfair Display',Georgia,serif;letter-spacing:-.015em;color:#fff;text-decoration:none}
  .of-menu ul a[aria-current]{color:#8c8c8c}
  .of-menu-lang{align-self:flex-start;font:500 11px Inter,sans-serif;letter-spacing:.18em;text-transform:uppercase;color:#c2c2c2;text-decoration:none;padding:10px 0;border-bottom:1px solid #5a5a5a}
  .of-menu{overscroll-behavior:contain}
}

/* ---------- Grands écrans (plus de 1280 px) : fonds et images sur toute la largeur,
   le contenu reste centré sur la largeur d'origine de la maquette ---------- */
@media (min-width:1281px){
  main{min-width:0!important}
  main>div>div,main>div>footer,main>header,main>section,main>footer{width:100%!important;max-width:none!important}
  main>div:first-child>div:first-child{width:auto!important;max-width:1280px!important}

  /* marges latérales : valeur de la maquette + ce qui dépasse de 1280 px */
  [id="1c"]>div>div:last-child,[id="2a"]>div,[id="5b"]>div,[id="3c"]>div,[id="11a"]>div,[id="4a"]>div,[id="9a"]>footer,
  main>header,main>footer,#b2,#b3,#b4,main>section#b1:not([style*="grid-template-columns"]){
    padding-left:max(80px,calc((100% - 1120px) / 2))!important;padding-right:max(80px,calc((100% - 1120px) / 2))!important}
  [id="trust"]>div{padding-left:max(0px,calc((100% - 1280px) / 2))!important;padding-right:max(0px,calc((100% - 1280px) / 2))!important}
  [id="bandeau-citation"]>div,#b2[style*="padding: 144px 160px"]{padding-left:max(160px,calc((100% - 960px) / 2))!important;padding-right:max(160px,calc((100% - 960px) / 2))!important}
  [id="8a"]>div,#rdv{padding-left:max(48px,calc((100% - 1184px) / 2))!important;padding-right:max(48px,calc((100% - 1184px) / 2))!important}

  /* blocs texte + portrait : le portrait s'élargit avec l'écran */
  [id="7c"]>div{grid-template-columns:minmax(0,1fr) max(560px,42%)!important}
  [id="7c"]>div>div:first-child{padding-left:max(80px,calc((100vw - 1120px) / 2))!important}
  #b1[style*="grid-template-columns"]{grid-template-columns:max(520px,40%) minmax(0,1fr)!important}
  #b1[style*="grid-template-columns"]>div:last-child{padding-right:max(80px,calc((100vw - 1120px) / 2))!important}
}

/* ---------- Écrans entre 1025 et 1279 px : la page suit la largeur de la fenêtre ---------- */
@media (max-width:1279px){
  main{min-width:0!important}
  main>div>div,main>div>footer,main>header,main>section,main>footer{width:100%!important;max-width:100%!important}
  body{overflow-x:hidden}
}

/* ---------- Tablette portrait et téléphone ---------- */
@media (max-width:1024px){
  main *{min-width:0}
  h1,h2,h3,p{overflow-wrap:break-word}
  main p{hyphens:manual!important;-webkit-hyphens:manual!important}

  /* Menus du haut : on garde le logo et le bouton, les liens passent dans le pied de page */
  main nav{display:none!important}
  [data-lang-switch]{display:none!important}
  main>div>footer nav,main>footer nav{display:flex!important;flex-wrap:wrap!important;gap:14px 22px!important}

  /* Barre fixe qui apparaît au défilement */
  main>div:first-child>div:first-child{padding:10px 16px!important}
  main>div:first-child>div:first-child>div:first-child{font-size:18px!important}
  main>div:first-child>div:first-child>div:last-child{display:none!important}

  /* En-tête des pages À propos / Ressources */
  main>header{padding:16px 72px 16px 20px!important;min-height:60px;box-sizing:border-box}
  main>header>div{display:none!important}
  main>header>a>span:last-child{display:none!important}
  main>header>a>span:first-child{font-size:20px!important}

  /* Bouton flottant « Prendre rendez-vous » */
  main>div[style*="position: fixed"][style*="right: 32px"]{right:12px!important;bottom:12px!important}
  main>div[style*="position: fixed"][style*="right: 32px"] span[style*="padding"]{padding:10px 16px 9px!important}
  main>div[style*="position: fixed"][style*="right: 32px"] span span{font-size:12px!important}

  /* ===== ACCUEIL ===== */


  /* Hero */
  [id="1c"]>div{height:auto!important;min-height:100svh!important}
  [id="1c"]>div>div:last-child{padding:20px 20px 48px!important;min-height:100svh;box-sizing:border-box}
  [id="1c"] header>div:last-child>span{display:none!important}
  [id="1c"] header>div:first-child>div:first-child{font-size:20px!important}
  [id="1c"] h1{font-size:clamp(34px,9.5vw,52px)!important;line-height:1.08!important}
  [id="1c"] h1+div{width:72px!important}
  [id="1c"] p{font-size:15px!important;line-height:1.6!important}
  [id="1c"] h1~div>div{flex-wrap:wrap!important;gap:18px!important}
  [id="1c"]>div>div:first-child{background-position:62% 55%!important}
  [id="1c"]>div>div:nth-child(2){background:linear-gradient(180deg,rgba(10,10,10,.55) 0%,rgba(10,10,10,.8) 55%,rgba(10,10,10,.92) 100%)!important}

  /* Chiffres clés : 2 × 2 */
  [id="trust"]>div{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  [id="trust"]>div>div{padding:32px 14px!important;gap:10px!important;border-right:0!important;border-bottom:1px solid #e5e7eb}
  [id="trust"]>div>div:nth-child(odd){border-right:1px solid #e5e7eb!important}
  [id="trust"]>div>div>span:first-child{font-size:26px!important;white-space:normal!important}
  [id="trust"]>div>div>span:last-child{font-size:13px!important}

  /* Marges des grandes sections */
  [id="2a"]>div,[id="5b"]>div,[id="3c"]>div,[id="11a"]>div,[id="4a"]>div{padding:72px 20px!important;gap:40px!important}
  [id="bandeau-citation"]>div{padding:80px 20px!important}

  /* 5 signaux */
  [id="2a"] h2{font-size:clamp(28px,7.5vw,40px)!important}
  [id="2a"]>div>div{grid-template-columns:minmax(0,1fr)!important;gap:12px!important}
  [id="2a"]>div>div>div{min-height:0!important;padding:28px 24px 30px!important}
  [id="2a"]>div>div>div>span:first-child{font-size:32px!important}
  [id="2a"]>div>div>div>span:nth-child(2){margin-top:4px!important}

  /* Cas client */
  [id="5b"]>div{grid-template-columns:minmax(0,1fr)!important}
  [id="5b"]>div>div:first-child>span:nth-child(2){font-size:clamp(48px,14vw,80px)!important}
  [id="5b"]>div>div:first-child>p{font-size:20px!important}
  [id="5b"]>div>div:last-child{padding:28px 24px 32px!important}

  /* Bandeau photo */
  [id="bandeau-photo"]>div{height:clamp(220px,56vw,460px)!important}

  /* Métiers */
  [id="3c"]>div{grid-template-columns:minmax(0,1fr)!important;row-gap:36px!important}
  [id="3c"] h2{font-size:clamp(24px,6.4vw,34px)!important;white-space:normal!important}
  [id="3c"] [data-of-slide]{font-size:clamp(30px,8.6vw,48px)!important;white-space:normal!important}
  [id="3c"]>div>div:last-child p{font-size:16px!important;text-align:left!important}

  /* Simulateur */
  [id="11a"]>div>div:first-child>div:first-child{font-size:14px!important;margin-top:0!important}
  [id="11a"]>div>div>div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  [id="11a"] h2{font-size:clamp(28px,7.5vw,40px)!important;padding-right:0!important}
  [id="11a"]>div>div:last-child{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  [id="11a"]>div>div:last-child>div{grid-column:auto!important;grid-row:auto!important;padding:28px 20px!important}
  [id="11a"]>div>div:last-child>div:nth-child(4){order:3}
  [id="11a"]>div>div:last-child>div:nth-child(3){order:4}
  [id="11a"] label{grid-template-columns:minmax(0,1fr) 128px!important;gap:12px!important}
  [id="11a"] input{font-size:16px!important}
  [id="11a"]>div>div:last-child>div:nth-child(3)>div{grid-template-columns:minmax(0,1fr) 80px 84px!important;gap:8px!important}
  [id="11a"]>div>div:last-child>div:nth-child(3)>div span{font-size:12px!important}
  [id="11a"]>div>div:last-child>div:nth-child(4)>div:nth-child(2){font-size:clamp(44px,13vw,72px)!important;white-space:normal!important}
  [id="11a"]>div>div:last-child>div:nth-child(4)>div:nth-child(4){gap:10px!important}
  [id="11a"]>div>div:last-child>div:nth-child(4)>div:nth-child(4) span:last-child{font-size:15px!important}
  [id="11a"]>div>div:last-child>div:nth-child(4)>div:last-child{flex-direction:column!important;align-items:stretch!important;gap:16px!important}
  [id="11a"]>div>div:last-child>div:nth-child(4)>div:last-child>span{text-align:center;white-space:normal!important}

  /* Citation */
  [id="bandeau-citation"] p:first-child{font-size:clamp(26px,7vw,40px)!important}
  [id="bandeau-citation"] p:nth-child(2){font-size:16px!important}

  /* Méthode 01 02 03 */
  [id="4a"] h2{font-size:clamp(32px,9vw,52px)!important}
  [id="4a"]>div>div{grid-template-columns:minmax(0,1fr)!important;gap:16px!important}
  [id="4a"] [data-of-rise]{margin-top:0!important;padding:32px 24px 36px!important;gap:16px!important}
  [id="4a"] [data-of-slide]{font-size:72px!important}
  [id="4a"] h3{font-size:26px!important}
  [id="4a"]>div>p{font-size:17px!important;margin-top:0!important}

  /* Portrait + histoire */
  [id="7c"]>div{grid-template-columns:minmax(0,1fr)!important}
  [id="7c"]>div>div:first-child{padding:72px 20px!important;gap:36px!important}
  [id="7c"]>div>div:first-child>p{font-size:clamp(28px,7.6vw,44px)!important}
  [id="7c"]>div>div:last-child{min-height:0!important;height:auto!important;aspect-ratio:4/5;order:-1}

  /* Rendez-vous 30 minutes (accueil + pages) */
  [id="8a"]>div,#rdv{padding:16px!important}
  [id="8a"]>div>div,#rdv>div{padding:48px 22px!important;grid-template-columns:minmax(0,1fr)!important;gap:32px!important}
  [id="8a"]>div>div>div:first-child,#rdv>div>div:first-child{padding-right:0!important;border-right:0!important;flex-direction:row!important;align-items:baseline!important;gap:14px!important}
  [id="8a"]>div>div>div:first-child>div:first-child,#rdv>div>div:first-child>div:first-child{overflow:visible!important}
  [id="8a"]>div>div>div:first-child [data-of-slide],#rdv>div>div:first-child>div:first-child{font-size:112px!important}
  [id="8a"] h2,#rdv h2{font-size:clamp(28px,8vw,44px)!important}
  [id="8a"] p,#rdv p{font-size:16px!important}
  [id="8a"] [data-of-reveal]>span:first-child,#rdv [data-r]>span:first-child{padding:18px 26px!important;width:100%;text-align:center;box-sizing:border-box}

  /* Pied de page */
  [id="9a"]>footer,main>footer{padding:56px 20px 32px!important;gap:44px!important}
  [id="9a"]>footer>div:first-child,main>footer>div:first-child{flex-direction:column!important;align-items:flex-start!important;gap:28px!important}
  [id="9a"]>footer>div:first-child>div,main>footer>div:first-child>a>div{font-size:24px!important}
  [id="9a"]>footer>div:last-child span[style*="margin-left"]{margin-left:0!important}

  /* ===== PAGES À PROPOS / RESSOURCES ===== */
  #b1,#b2,#b3,#b4{padding-left:20px!important;padding-right:20px!important;padding-top:72px!important;padding-bottom:72px!important;gap:44px!important}
  main h1{font-size:clamp(34px,9.5vw,52px)!important;line-height:1.08!important}
  #b1 p,#b2 p,#b3 p{font-size:16px!important}
  #b2 h2,#b3 h2,#b4 h2{font-size:clamp(28px,7.6vw,40px)!important;position:static!important}
  #b3>div[style*="grid-template-columns"],#b3[style*="grid-template-columns"],#b4>div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;gap:28px!important}

  /* À propos : ouverture portrait + texte */
  #b1[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important;padding:0!important;min-height:0!important;gap:0!important}
  #b1[style*="grid-template-columns"]>div:first-child{aspect-ratio:4/5}
  #b1[style*="grid-template-columns"]>div:last-child{padding:44px 20px 64px!important;gap:28px!important}

  /* À propos : histoire */
  #b2>div{width:100%!important;gap:36px!important}
  #b2>div>div{font-size:16px!important}
  #b2 p[style*="italic"]{font-size:22px!important}

  /* À propos : chiffres 10 ans / 70 M€ / 250 personnes */
  #b3:not([style*="grid-template-columns"])>div:nth-child(2)>div{padding:20px 0!important;border-left:0!important;border-top:1px solid #e5e7eb}
  #b3:not([style*="grid-template-columns"])>div:nth-child(2)>div:first-child{border-top:0}
  #b3:not([style*="grid-template-columns"])>div:nth-child(2)>div>span:first-child{font-size:44px!important;white-space:normal!important}
  #b3:not([style*="grid-template-columns"])>div:nth-child(2){gap:0!important;padding:16px 0!important}
  #b3 p[style*="italic"]{font-size:22px!important}

  /* À propos : trois choses à savoir */
  #b4 h3{font-size:20px!important}
  #b4 h3[style*="italic"]{font-size:26px!important}

  /* Ressources : article mis en avant (image + texte) et liens secondaires */
  #b2>a[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  #b2>a[style*="grid-template-columns"]>div:last-child{padding:28px 22px 32px!important;gap:28px!important}
  #b2>a[style*="grid-template-columns"] h2{font-size:clamp(26px,7vw,34px)!important}
  #b2>a[style*="grid-template-columns"] span[style*="padding: 20px 36px"]{padding:16px 24px!important}
  #b2:has(>a[style*="grid-template-columns"]),#b4:has(>div[style*="flex-wrap"]){padding-top:0!important}
  #b4>div[style*="flex-wrap"]{flex-direction:column!important;gap:14px!important}
  #b4>div[style*="flex-wrap"]>span[aria-hidden]{display:none!important}
  #b4>div[style*="flex-wrap"]>a{flex-wrap:wrap!important;gap:4px 10px!important}

  /* Ressources : premiers articles */
  #b2[style*="text-align"] h2{font-size:clamp(28px,7.6vw,40px)!important}
  #b2>div[style*="grid-template-columns"]{grid-template-columns:minmax(0,1fr)!important}
  #b2>div[style*="grid-template-columns"]>a{padding:24px 22px 26px!important}
  #b3>div>div>span:first-child{font-size:18px!important}
}