/* =====================================================================
   OPsol — site public
   Charte graphique v1.0. Aucune ressource distante : polices
   auto-hebergees, SVG en ligne, pas de CDN. Un produit dont l'argument
   est de tenir sans internet ne va pas chercher ses polices ailleurs.
   ===================================================================== */

/* IBM Plex Sans est servie en police VARIABLE : un seul fichier couvre
   300 a 700. On le declare donc UNE fois avec sa plage. Cinq
   declarations pointant le meme fichier ne le telechargeraient qu'une
   fois, mais laisseraient le navigateur rendre l'instance par defaut au
   lieu d'interpoler la graisse demandee.
   Condensed et Mono sont statiques : un fichier par graisse. */
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:300 700;font-display:swap;src:url('/fonts/ibm-plex-sans.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('/fonts/ibm-plex-sans-condensed-600.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Sans Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('/fonts/ibm-plex-sans-condensed-700.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('/fonts/ibm-plex-mono-400.woff2') format('woff2')}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('/fonts/ibm-plex-mono-500.woff2') format('woff2')}

:root{
  --encre:#0A1C24;
  --petrole:#0E5D6B;
  --petrole-clair:#8FC5C6;
  --safran:#E8A33D;
  --menthe:#14A07A;
  --terre:#C4452F;
  --papier:#F3F2EE;
  --ardoise:#5B6A70;
  --ardoise-30:#C3C8C6;
  --ardoise-10:#E4E5E1;
  --display:'IBM Plex Sans Condensed',system-ui,sans-serif;
  --texte:'IBM Plex Sans',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--papier);color:var(--encre);
  font-family:var(--texte);font-size:17px;line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
img,svg{max-width:100%}
.wrap{max-width:1060px;margin:0 auto;padding:0 22px}

/* --- dentelure : seul motif de la marque, bord horizontal seulement -- */
.dent{height:12px;width:100%}
.dent-papier{
  background:
    linear-gradient(135deg,var(--papier) 50%,transparent 50%) 0 0/13px 12px repeat-x,
    linear-gradient(-135deg,var(--papier) 50%,transparent 50%) 6.5px 0/13px 12px repeat-x;
}

/* --- en-tete --------------------------------------------------------- */
.entete{
  position:sticky;top:0;z-index:50;background:rgba(243,242,238,.94);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--ardoise-10);
}
.entete .wrap{display:flex;align-items:center;gap:20px;height:68px}
.marque{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit}
.marque svg{width:34px;height:34px;flex:none}
.marque .mot{font-family:var(--display);font-size:26px;line-height:1;letter-spacing:-.02em;font-weight:700}
.marque .mot span{font-weight:300;color:var(--petrole)}
.nav{margin-left:auto;display:flex;align-items:center;gap:26px}
.nav a{color:var(--encre);text-decoration:none;font-size:15px;font-weight:500}
.nav a:hover{color:var(--petrole)}
@media(max-width:820px){.nav a.masq{display:none}}

/* --- boutons --------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:48px;padding:13px 22px;border:0;border-radius:10px;
  font-family:var(--texte);font-size:16px;font-weight:600;
  text-decoration:none;cursor:pointer;
}
.btn-p{background:var(--petrole);color:#fff}
.btn-p:hover{background:#0b4c58}
.btn-a{background:var(--safran);color:var(--encre)}
.btn-a:hover{background:#d9942f}
.btn-s{background:transparent;color:var(--encre);border:1.5px solid var(--ardoise-30)}
.btn-s:hover{border-color:var(--petrole);color:var(--petrole)}
.btn:focus-visible{outline:3px solid var(--safran);outline-offset:2px}
.btn[disabled]{opacity:.55;cursor:not-allowed}

/* --- heros ----------------------------------------------------------- */
.hero{background:var(--encre);color:var(--papier);padding:76px 0 0}
.hero .wrap{padding-bottom:64px;display:grid;gap:44px;grid-template-columns:1fr}
@media(min-width:900px){.hero .wrap{grid-template-columns:1.15fr .85fr;align-items:center}}
.hero h1{
  font-family:var(--display);font-weight:700;letter-spacing:-.025em;line-height:1.05;
  font-size:clamp(34px,6vw,56px);margin:0 0 18px;max-width:16ch;
}
.hero p.chapeau{color:var(--ardoise-30);font-size:18.5px;margin:0 0 28px;max-width:52ch}
.hero .accent{color:var(--safran)}
.hero .actions{display:flex;gap:12px;flex-wrap:wrap}
.hero .sous{margin:20px 0 0;font-size:14px;color:var(--ardoise-30)}

/* --- ticket illustratif ---------------------------------------------- */
.ticket{
  background:#fff;color:#111;max-width:290px;margin:0 auto;
  padding:16px 16px 0;border-radius:4px 4px 0 0;
  font-family:var(--mono);font-size:11px;line-height:1.55;
}
.ticket .c{text-align:center}
.ticket .r{display:flex;justify-content:space-between;gap:10px}
.ticket hr{border:0;border-top:1px dashed #9AA3A6;margin:7px 0}
.ticket svg{width:30px;height:30px;display:block;margin:0 auto 6px}
.ticket .qr{
  width:52px;height:52px;margin:8px auto 0;
  background:repeating-conic-gradient(#111 0 25%,#fff 0 50%) 0 0/9px 9px;
}
.ticket-dent{
  height:9px;max-width:290px;margin:0 auto;
  background:
    linear-gradient(135deg,var(--encre) 50%,transparent 50%) 0 0/10px 9px repeat-x,
    linear-gradient(-135deg,var(--encre) 50%,transparent 50%) 5px 0/10px 9px repeat-x,
    #fff;
}

/* --- sections -------------------------------------------------------- */
section{padding:64px 0}
.eyebrow{
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;
  text-transform:uppercase;color:var(--petrole);margin:0 0 10px;
}
h2{
  font-family:var(--display);font-weight:700;letter-spacing:-.02em;line-height:1.12;
  font-size:clamp(26px,4.4vw,38px);margin:0 0 14px;
}
h3{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-.01em;margin:0 0 8px}
.lead{font-size:18px;color:#2C3D44;max-width:62ch;margin:0 0 8px}
.note{font-size:14.5px;color:var(--ardoise)}

/* --- grilles de cartes ----------------------------------------------- */
.grille{display:grid;gap:16px;grid-template-columns:1fr;margin-top:30px}
@media(min-width:700px){.grille-3{grid-template-columns:repeat(3,1fr)}}
@media(min-width:700px){.grille-2{grid-template-columns:repeat(2,1fr)}}
.carte{
  background:#fff;border:1px solid var(--ardoise-10);border-radius:14px;padding:22px;
}
.carte p{margin:0;color:var(--ardoise);font-size:15.5px}
.carte .chiffre{
  font-family:var(--mono);font-weight:500;font-size:30px;color:var(--terre);
  display:block;margin-bottom:4px;font-variant-numeric:tabular-nums;
}
.carte .pict{
  width:38px;height:38px;border-radius:10px;display:flex;align-items:center;
  justify-content:center;margin-bottom:12px;background:#E7EFF0;
}
.carte .pict svg{width:20px;height:20px}

/* --- metiers --------------------------------------------------------- */
.metier{background:#fff;border:1px solid var(--ardoise-10);border-radius:14px;overflow:hidden}
.metier .tete{padding:18px 22px;background:var(--petrole);color:#fff}
.metier .tete h3{margin:0;color:#fff}
.metier .tete span{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.metier ul{margin:0;padding:18px 22px 22px 38px;color:var(--ardoise);font-size:15.5px}
.metier li{margin-bottom:7px}

/* --- bandeau sombre -------------------------------------------------- */
.sombre{background:var(--encre);color:var(--papier)}
.sombre h2{color:var(--papier)}
.sombre .lead{color:var(--ardoise-30)}
.sombre .carte{background:#12262F;border-color:#1D3742}
.sombre .carte h3{color:var(--papier)}
.sombre .carte p{color:var(--ardoise-30)}

/* --- tarifs ---------------------------------------------------------- */
.tarifs{display:grid;gap:16px;grid-template-columns:1fr;margin-top:30px}
@media(min-width:640px){.tarifs{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.tarifs{grid-template-columns:repeat(4,1fr)}}
.plan{
  background:#fff;border:1px solid var(--ardoise-10);border-radius:14px;
  padding:22px;display:flex;flex-direction:column;
}
.plan.mis{border:2px solid var(--petrole);position:relative}
.plan.mis::after{
  content:"Le plus choisi";position:absolute;top:-11px;left:22px;
  background:var(--safran);color:var(--encre);font-size:11px;font-weight:600;
  padding:3px 9px;border-radius:20px;font-family:var(--mono);letter-spacing:.04em;
}
.plan .nom{font-family:var(--display);font-weight:700;font-size:19px}
.plan .prix{
  font-family:var(--mono);font-variant-numeric:tabular-nums;font-size:31px;
  font-weight:500;margin:8px 0 2px;
}
.plan .prix small{font-size:14px;color:var(--ardoise);font-weight:400}
.plan ul{list-style:none;margin:16px 0 20px;padding:0;font-size:14.5px;color:var(--ardoise)}
.plan li{padding:5px 0 5px 22px;position:relative}
.plan li::before{
  content:"";position:absolute;left:2px;top:12px;width:9px;height:9px;
  border-radius:2px;background:var(--menthe);
}
.plan li.non::before{background:var(--ardoise-30)}
.plan .btn{margin-top:auto;width:100%}

/* --- a venir --------------------------------------------------------- */
.badge{
  display:inline-block;font-family:var(--mono);font-size:10.5px;font-weight:500;
  letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:20px;
  background:var(--safran);color:var(--encre);margin-bottom:10px;
}

/* --- formulaire ------------------------------------------------------ */
/* La carte est blanche a l'interieur d'une section .sombre : elle doit
   RENDRE la couleur du texte, sinon tout ce qui n'a pas de couleur
   propre herite du blanc casse de la section et disparait sur le fond
   blanc. C'est ce qui rendait les <label> illisibles, tandis que les
   champs — qui declarent leur couleur — restaient visibles. */
.form{
  background:#fff;color:var(--encre);
  border:1px solid var(--ardoise-10);border-radius:14px;
  padding:26px;margin-top:28px;
}
.form .note{color:var(--ardoise)}
.champs{display:grid;gap:16px;grid-template-columns:1fr}
@media(min-width:640px){.champs{grid-template-columns:1fr 1fr}}
.champ{display:flex;flex-direction:column}
.champ.plein{grid-column:1/-1}
label{font-size:14px;font-weight:600;margin-bottom:6px}
label .opt{font-weight:400;color:var(--ardoise)}
input,select,textarea{
  font-family:var(--texte);font-size:16px;color:var(--encre);
  padding:12px 13px;min-height:48px;border:1.5px solid var(--ardoise-30);
  border-radius:10px;background:#fff;width:100%;
}
textarea{min-height:96px;resize:vertical}
input:focus,select:focus,textarea:focus{
  outline:3px solid var(--safran);outline-offset:1px;border-color:var(--petrole);
}
input[aria-invalid="true"],select[aria-invalid="true"]{border-color:var(--terre)}
/* Pot de miel : invisible pour l'humain, rempli par les robots. */
.miel{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
/* Case de consentement : la zone cliquable couvre le texte entier, pas
   seulement le carré de 16 px — sur un téléphone, viser la case seule
   est un exercice d'adresse. */
.consentement{
  display:flex;gap:11px;align-items:flex-start;margin-top:20px;
  font-size:14.5px;font-weight:400;cursor:pointer;color:var(--encre);
}
.consentement input{
  width:20px;height:20px;min-height:0;flex:none;margin-top:2px;
  accent-color:var(--petrole);cursor:pointer;
}
.consentement input:focus-visible{outline:3px solid var(--safran);outline-offset:2px}
.form .btn{margin-top:20px}
.form .btn:disabled{opacity:.5;cursor:not-allowed}

/* Un bouton inactif sans explication laisse croire a une panne : on dit
   toujours ce qui manque encore. */
.manque{margin:10px 0 0;font-size:14px;color:var(--ardoise)}
.manque:empty{display:none}
.champ .erreur{margin:6px 0 0;font-size:13.5px;color:var(--terre);font-weight:500}
.champ .erreur:empty{display:none}

/* --- fenêtre de confirmation ---------------------------------------- */
.voile{
  position:fixed;inset:0;background:rgba(10,28,36,.7);z-index:100;
  display:none;align-items:center;justify-content:center;padding:20px;
}
.voile.ouvert{display:flex}
.modale{
  background:#fff;color:var(--encre);border-radius:14px;padding:26px;
  max-width:520px;width:100%;max-height:88vh;overflow:auto;
}
.modale h3{font-family:var(--display);font-size:22px;margin:0 0 8px}
.modale .intro{color:var(--ardoise);font-size:14.5px;margin:0 0 18px}
.recap{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 18px}
.recap th{
  text-align:left;font-weight:600;padding:9px 12px 9px 0;
  vertical-align:top;white-space:nowrap;color:var(--ardoise);font-size:13.5px;
}
.recap td{padding:9px 0;border-bottom:1px solid var(--ardoise-10);vertical-align:top}
.recap tr:last-child td,.recap tr:last-child th{border-bottom:0}
.recap .courriel{font-weight:600}
.avis{
  background:#FDF4E6;border:1px solid #F2DDBB;border-radius:10px;
  padding:13px 15px;font-size:14.5px;margin:0 0 20px;
}
.modale-actions{display:flex;gap:10px;flex-wrap:wrap}
.modale-actions .btn{flex:1;min-width:150px;margin:0}
.retour{margin-top:16px;font-size:15px;padding:13px 15px;border-radius:10px;display:none}
.retour.ok{display:block;background:#E6F5EF;color:#0B5A43;border:1px solid #B7E2D2}
.retour.ko{display:block;background:#FBEAE7;color:#8E2C1D;border:1px solid #F0C4BC}

/* --- pied ------------------------------------------------------------ */
footer{background:var(--encre);color:var(--ardoise-30);padding:38px 0;font-size:14.5px}
footer .wrap{display:flex;gap:14px;justify-content:space-between;flex-wrap:wrap}
footer b{color:var(--papier);font-family:var(--display);font-weight:600}
footer a{color:var(--petrole-clair);text-decoration:none}