/* Composants partages par l'accueil et les pages generees.
   Genere par pages.py : ne pas editer a la main. */

/* Illustrations sur mesure, dans l'esprit de celles de brokersaas.eu : fond clair,
   carte blanche, halo colore, et des morceaux d'interface dessines. */
.illus{width:100%;height:auto;display:block;
       filter:drop-shadow(0 16px 34px rgba(14,29,61,.13))}
.illus .t,.illus text{font-family:var(--font-sans);fill:#0E1D3D}
.illus .b{font-weight:600;font-size:15px}
.illus .b12{font-weight:600;font-size:12.5px}
.illus .s{font-size:12.5px;fill:#445373}
.illus .mini{font-size:10.5px}
.illus .mini.b{font-weight:600}
.illus .xl{font-weight:600;font-size:29px;letter-spacing:-.02em}
.illus .ini{font-weight:600;font-size:12px}
.illus .code{font-family:var(--font-mono);font-size:10px;fill:#445373}

/* ---------- supplément des pages intérieures ---------- */
/* L'accueil n'a ni prose longue, ni tableau, ni étapes numérotées. */
.prose{max-width:74ch}
/* justifie + cesure : sans `hyphens`, le justifie creuse des rivieres blanches */
.prose p{margin-bottom:18px;color:var(--text-muted);line-height:1.7;
         text-align:left}
.prose p strong{color:var(--text);font-weight:600}
.prose h3{font-size:21px;margin:34px 0 12px;letter-spacing:-.01em}
.prose ul,.prose ol{margin:0 0 18px 20px;color:var(--text-muted);line-height:1.7}
.prose li{margin-bottom:7px}
.prose li strong{color:var(--text);font-weight:600}
.prose > :first-child{margin-top:0}

/* Le cadre est porte par le CONTENEUR, pas par la table : avec
   `border-collapse:collapse`, un `border-radius` sur la table ne rogne pas les
   cellules et l'ombre se dessine mal. D'ou un tableau sans bordure visible.
   Fond blanc aussi : sur une section en `--bg-subtle`, un en-tete de la meme
   couleur se confond avec elle et le tableau perd sa structure. */
.tbl-wrap{overflow:hidden;overflow-x:auto;background:var(--surface);
          border:1px solid var(--border-soft);border-radius:var(--r-lg)}
.tbl{width:100%;border-collapse:collapse;font-size:15px;background:none;border:0}
.tbl th,.tbl td{padding:13px 16px;text-align:left;vertical-align:top;
                border-bottom:1px solid var(--border-soft)}
.tbl thead th{background:var(--bg-subtle);font-family:var(--font-mono);font-size:11.5px;
              letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted);font-weight:500}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl td:first-child{font-weight:600;color:var(--text);white-space:nowrap}

.steps{counter-reset:e;display:grid;gap:2px;background:var(--border-soft);
       border:1px solid var(--border-soft);border-radius:var(--r-lg);overflow:hidden}
.step{background:var(--surface);padding:24px 26px;display:flex;gap:18px;align-items:flex-start}
.step::before{counter-increment:e;content:counter(e);flex:none;
  width:30px;height:30px;border-radius:50%;background:var(--aqua-500);color:var(--ink-900);
  font-weight:600;font-size:15px;display:flex;align-items:center;justify-content:center}
.step h3{font-size:17px;margin-bottom:5px}
.step p{color:var(--text-muted);line-height:1.65;margin:0}

/* liste de pays sur trois colonnes, repliée en une seule sur petit écran */
.cols3{columns:3;column-gap:34px;color:var(--text-muted);line-height:1.9;
       font-variant-numeric:tabular-nums}
.cols3 span{display:block;break-inside:avoid}
.cols3 b{color:var(--text);font-weight:600}

/* Héros des pages intérieures : deux colonnes, comme l'accueil. Sans la seconde,
   60 % de la largeur restait vide et la page paraissait inachevée. */
.hero-in{padding-block:34px 76px}
.hero2{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
       gap:56px;align-items:start}
.hero2 h1{margin-bottom:20px}
.hero2 .hero-lede{max-width:46ch}
.resume{border:1px solid var(--border);border-radius:var(--r-lg);background:var(--surface);
        padding:28px 30px 26px;box-shadow:0 18px 44px -30px rgba(14,29,61,.30)}
.resume-t{font-family:var(--font-mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;
          text-transform:uppercase;color:var(--accent-text);margin-bottom:16px}
.resume ul{list-style:none;margin:0;padding:0}
.resume li{position:relative;padding-left:24px;margin-bottom:13px;line-height:1.55;
           color:var(--text-muted)}
.resume li:last-child{margin-bottom:0}
.resume li strong{color:var(--text);font-weight:600}
.resume li::before{content:"";position:absolute;left:3px;top:.55em;width:8px;height:8px;
                   border-radius:50%;background:var(--aqua-500)}

@media (max-width:940px){
  .hero2{grid-template-columns:1fr;gap:34px}
  .hero2 .resume{margin-top:0}
  .hero2 .hero-lede{max-width:none}
}

/* Capture d'ecran : cadre sobre, ombre portee, jamais de fausse fenetre de
   navigateur qui vieillit mal. */
.shot{margin:0}
.shot img{display:block;width:100%;height:auto;border:1px solid var(--border);
          border-radius:var(--r-lg);box-shadow:0 26px 60px -34px rgba(14,29,61,.42)}
.shot figcaption{margin-top:14px;font-size:14px;color:var(--text-muted);
                 font-family:var(--font-mono);line-height:1.5}
/* Deux captures cote a cote n'ont pas la meme hauteur : sans cela, leurs legendes
   se retrouvent a deux niveaux differents et le bloc parait de travers. */
.duo-shot{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;align-items:stretch}
.duo-shot .shot{display:flex;flex-direction:column;height:100%}
.duo-shot .shot figcaption{margin-top:14px;padding-top:0}
/* Capture de softphone : coins transparents, pas de cadre ni d'ombre rectangulaire.
   L'ombre suit la silhouette arrondie du telephone, et la carte garde une taille
   de telephone au lieu de remplir toute la colonne. */
.shot.sp img{border:0;box-shadow:none;background:transparent;border-radius:0;
             max-width:330px;margin-inline:auto;
             filter:drop-shadow(0 24px 46px rgba(14,29,61,.20))}
.shot.sp figcaption{text-align:center}


@media (max-width:760px){
  .duo-shot{grid-template-columns:1fr}
}

/* Composition a deux colonnes : le remede a l'empilement de sections identiques. */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:60px;
       align-items:start}
/* Un visuel a cote d'un texte demarre au niveau du TITRE, pas du bandeau (trop
   haut) ni centre (position variable selon la hauteur des colonnes = alignement
   incoherent d'une section a l'autre). Decalage constant = hauteur du bandeau. */
.split .shot,.split .split-vis{margin-top:var(--vis-off)}
.hero2 .resume{margin-top:var(--vis-off)}
.split.serre{gap:44px}
.split-vis{width:100%;max-width:560px;margin-inline:auto}
/* UNE seule echelle de titre sur tout le site. Le bloc a deux colonnes avait la
   sienne (36px contre 46px), et c'est ce qui donnait l'impression que les pages
   n'etaient pas de la meme famille. */
.split-txt h2{font-size:clamp(29px,3.8vw,46px);line-height:1.08;letter-spacing:-.03em;
              margin-bottom:18px}
.split-txt h3{font-size:17px;margin:26px 0 8px}
.split-txt .lede-s{font-size:16.5px;line-height:1.7;color:var(--text-muted);
                   margin-bottom:14px;max-width:52ch;
                   text-align:left}
/* un paragraphe qui suit une liste collait a celle-ci : la liste n'a pas de marge
   basse, et le paragraphe n'avait pas de marge haute. */
.coches + .lede-s,.coches + h3{margin-top:20px}
.split-txt .hero-cta{margin-top:24px}
.split-txt .fine{margin-top:18px}
.split--inv .split-txt{order:2}

/* liste a coches : plus vivante qu'une puce ronde, et alignee sur la charte */
.coches{list-style:none;margin:6px 0 0;padding:0}
.coches li{position:relative;padding-left:30px;margin-bottom:12px;line-height:1.6;
           color:var(--text-muted)}
.coches li:last-child{margin-bottom:0}
.coches li strong{color:var(--text);font-weight:600}
.coches li::before{content:"";position:absolute;left:0;top:.3em;width:18px;height:18px;
  border-radius:50%;background:var(--aqua-500)}
.coches li::after{content:"";position:absolute;left:5.5px;top:.62em;width:7px;height:4px;
  border-left:2px solid var(--ink-900);border-bottom:2px solid var(--ink-900);
  transform:rotate(-45deg)}

/* Bandeau d'affirmation. On garde la FORME du bloc, en carte blanche cernee d'un
   filet aqua, exactement comme le bandeau de chiffres de l'accueil. Pas d'aplat
   aqua : il ne plaisait pas, et il interdit d'y ecrire en aqua. */
/* Le bandeau est une CARTE posee dans la gouttiere standard de 100 px, pas une
   section de plus : padding nul, et la section suivante garde sa marge haute. On
   obtient ainsi 100 px de part et d'autre, exactement comme entre deux blocs
   ordinaires. Sans la seconde regle, la chaine `.section + .section` de l'accueil
   annulait la marge du bloc suivant et la carte le touchait. */
.bande{padding-block:0}
.section.bande + .section{padding-top:100px}
@media (max-width:640px){.section.bande + .section{padding-top:68px}}
.bande-in{position:relative;overflow:hidden;display:grid;
          grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:44px;
          align-items:center;background:var(--ink-900);
          border:0;border-left:6px solid var(--aqua-500);border-radius:var(--r-lg);
          padding:38px 40px}
.bande-in::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(100% 160% at 96% 4%,rgba(36,211,196,.16) 0%,transparent 56%)}
.bande-in > *{position:relative}
.bande p{font-size:clamp(19px,2vw,25px);line-height:1.32;font-weight:500;
         letter-spacing:-.02em;color:var(--onink-text);margin:0;max-width:34ch}
.bande-n{display:flex;gap:38px;justify-content:flex-end}
.bande-n b{display:block;font-size:30px;font-weight:600;letter-spacing:-.02em;
           line-height:1.1;font-variant-numeric:tabular-nums;color:var(--onink-text)}
.bande-n span{display:block;font-family:var(--font-mono);font-size:10.5px;
              letter-spacing:.2em;text-transform:uppercase;color:var(--onink-accent);
              margin-top:4px}

/* citation : un filet aqua, pas de gros guillemets decoratifs */
.cit{margin:0;border-left:3px solid var(--aqua-500);padding:4px 0 4px 26px;max-width:58ch}
.cit blockquote{margin:0;font-size:clamp(19px,1.9vw,23px);line-height:1.45;
                letter-spacing:-.015em;color:var(--text)}
.cit figcaption{margin-top:14px;font-family:var(--font-mono);font-size:11.5px;
                letter-spacing:.2em;text-transform:uppercase;color:var(--text-muted)}

.section-head.centre{margin-inline:auto;text-align:center;max-width:56ch}
.section-head.centre .eyebrow{justify-content:center}

@media (max-width:940px){
  .split{grid-template-columns:1fr;gap:36px}
  .split .shot,.split .split-vis{margin-top:0}
  .split--inv .split-txt{order:0}
  .bande-in{grid-template-columns:1fr;gap:24px;padding:28px 26px}
  .bande-n{justify-content:flex-start;gap:30px;flex-wrap:wrap}
}

/* ============ UN SEUL LANGAGE DE SURVOL POUR LES CARTES ============
   Constate a l'usage : les tuiles de fonction portaient un lisere superieur que
   les autres n'avaient pas, et les cartes n'avaient meme pas le meme filet au
   repos (--border ici, --border-soft la). Tout est defini ICI, dans la feuille
   qui charge en dernier, pour l'accueil comme pour les pages generees. */
.feat,.case,.bcard,.video,.duo-card{
  border:1px solid var(--border-soft);border-radius:var(--r-lg);
  box-shadow:0 14px 34px -26px rgba(14,29,61,.26);
  transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.feat:hover,.case:hover,.bcard:hover,.video:hover{
  transform:translateY(-3px);border-color:var(--aqua-500);
  box-shadow:0 22px 46px -26px rgba(14,29,61,.32)}
/* le lisere superieur de la tuile de fonction etait le seul de son espece */
.feat::before{content:none}
/* meme relief pour les blocs non cliquables : etapes, tableaux, encarts. Ils
   etaient definis dans le bloc retire de l'accueil, et avaient perdu leur ombre. */
.steps,.tbl-wrap,.renvoi{box-shadow:0 14px 34px -28px rgba(14,29,61,.24)}

/* la vignette video garde son fond encre, et son image respire au survol */
.video{background:var(--ink-900)}
.video:hover img{opacity:1;transform:scale(1.02)}
/* les cartes cliquables prennent le focus clavier comme la souris */
.feat:focus-within,a.case:focus-visible,.bcard:focus-visible{
  transform:translateY(-3px);border-color:var(--aqua-700);
  outline:3px solid rgba(36,211,196,.35);outline-offset:2px}

/* Empilement de blocs dans une meme section, avec un ecart CONSTANT. Remplace les
   cales de hauteur fixe que j'avais semees a la main, et qui expliquaient une
   partie de l'irregularite de l'espacement. */
.pile > * + *{margin-top:34px}

/* Article : une colonne de lecture, pas la largeur de la page. Une ligne de plus
   de 75 caracteres fatigue, c'est mesure depuis longtemps en typographie. */
.art{max-width:70ch}
.art p{margin-bottom:20px;color:var(--text);font-size:17.5px;line-height:1.75;
       text-align:left}
.art p strong{font-weight:600}
.art h3{font-size:23px;margin:40px 0 14px;letter-spacing:-.015em}
.art ul,.art ol{margin:0 0 22px 22px;color:var(--text);font-size:17px;line-height:1.7}
.art li{margin-bottom:9px}
.art li strong{font-weight:600}
.note{margin:26px 0 28px;padding:20px 24px;background:var(--bg-subtle);
      border-left:3px solid var(--aqua-500);border-radius:var(--r-sm)}
.note p{margin:0;font-size:16px;color:var(--text-muted);text-align:left}

/* Liste des articles */
.bgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.bcard{display:flex;flex-direction:column;gap:10px;text-decoration:none;
       background:var(--surface);border:1px solid var(--border-soft);
       border-radius:var(--r-lg);padding:28px 28px 26px;
       box-shadow:0 14px 34px -28px rgba(14,29,61,.26);
       transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.bcard:hover{transform:translateY(-3px);border-color:var(--aqua-500);
             box-shadow:0 22px 46px -26px rgba(14,29,61,.32)}
.bcard-m{font-family:var(--font-mono);font-size:11px;letter-spacing:.2em;
         text-transform:uppercase;color:var(--text-muted)}
.bcard h3{font-size:20px;line-height:1.25;letter-spacing:-.015em;color:var(--text)}
.bcard p{color:var(--text-muted);line-height:1.6;font-size:15.5px;flex:1}
.bcard-l{font-size:14px;font-weight:600;color:var(--accent-text)}
.art-meta{font-family:var(--font-mono);font-size:12px;letter-spacing:.2em;
          text-transform:uppercase;color:var(--text-muted);margin-bottom:6px}
@media (max-width:760px){.bgrid{grid-template-columns:1fr}}

/* Bandeau de références. Niveaux de gris au repos : six chartes graphiques en
   couleur se battraient avec la nôtre. La couleur revient au survol. */
.logos-i{text-align:center;color:var(--text-muted);font-size:15px;margin-bottom:28px}
.logos-g{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;
         gap:20px 52px}
.logo-c{display:grid;place-items:center;height:56px}
.logo-c img{max-height:34px;width:auto;max-width:150px;filter:grayscale(1);opacity:.62;
            transition:filter .2s ease,opacity .2s ease}
.logo-c:hover img{filter:none;opacity:1}

/* Vidéos : vignette hébergée chez nous, iframe inséré au clic seulement. */
.videos{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.video{position:relative;border-radius:var(--r-lg);overflow:hidden;background:var(--ink-900);
       border:1px solid var(--border-soft);
       box-shadow:0 14px 34px -26px rgba(14,29,61,.30)}
.video img{display:block;width:100%;height:auto;opacity:.92;transition:opacity .2s ease,
           transform .3s ease}
.video:hover img{opacity:1;transform:scale(1.02)}
.video-b{position:absolute;inset:0;width:100%;border:0;background:none;cursor:pointer;
         display:grid;place-items:center}
.video-b span{width:56px;height:56px;border-radius:50%;background:var(--aqua-500);
              display:grid;place-items:center;
              box-shadow:0 8px 24px -8px rgba(14,29,61,.5);transition:transform .18s ease}
.video-b span::before{content:"";width:0;height:0;margin-left:4px;
  border-left:16px solid var(--ink-900);border-top:10px solid transparent;
  border-bottom:10px solid transparent}
.video-b:hover span{transform:scale(1.08)}
.video-b:focus-visible{outline:3px solid var(--aqua-700);outline-offset:-3px}
.video-t{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 12px;color:#fff;
         font-size:13.5px;font-weight:500;
         background:linear-gradient(transparent,rgba(14,29,61,.86))}
.video.joue img,.video.joue .video-b,.video.joue .video-t{display:none}
.video.joue iframe{display:block;width:100%;aspect-ratio:16/9;border:0}
@media (max-width:900px){.videos{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.videos{grid-template-columns:1fr}.logos-g{gap:18px 32px}}

/* Formulaire de contact. Champs larges, libelles au dessus : c'est ce qui se
   remplit le plus vite, y compris depuis un telephone. */
.form{display:grid;gap:14px;background:var(--surface);border:1px solid var(--border);
      border-top:4px solid var(--aqua-500);border-radius:var(--r-lg);
      padding:26px 26px 24px;box-shadow:0 20px 48px -32px rgba(14,29,61,.30)}
.form-l{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{display:block;font-size:12.5px;font-weight:600;color:var(--text)}
.form input[type=text],.form input[type=email],.form input[type=tel],.form select{
  width:100%;margin-top:6px;padding:11px 13px;font:inherit;font-size:15px;
  color:var(--text);background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);transition:border-color .15s,box-shadow .15s}
.form input:focus-visible,.form select:focus-visible{outline:none;
  border-color:var(--aqua-700);box-shadow:0 0 0 3px rgba(36,211,196,.28)}
.form .form-c{display:flex;gap:10px;align-items:flex-start;font-weight:400;
              font-size:13px;color:var(--text-muted);line-height:1.5}
.form .form-c input{margin-top:2px;width:17px;height:17px;accent-color:var(--aqua-700);flex:none}
.form .form-c a{color:var(--accent-text)}
.form button{margin-top:4px;width:100%;justify-content:center}
.form textarea{width:100%;margin-top:6px;padding:11px 13px;font:inherit;font-size:15px;
  color:var(--text);background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm);resize:vertical;min-height:76px}
.form textarea:focus-visible{outline:none;border-color:var(--aqua-700);
  box-shadow:0 0 0 3px rgba(36,211,196,.28)}
.form .opt{font-weight:400;color:var(--text-muted);font-size:11.5px}
/* leurre anti-robot : hors de l'ecran plutot que `display:none`, que certains
   robots savent detecter. Retire de l'ordre de tabulation et du lecteur d'ecran. */
.piege{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form .fine{margin:0;text-align:center}
/* Formulaire de devis : long par nature, donc decoupe en groupes titres, sinon
   on ne sait plus ou on en est. */
.form-devis{max-width:none}
.form-g{border-top:1px solid var(--border-soft);padding-top:18px}
.form-g:first-of-type{border-top:0;padding-top:0}
.form-gt{font-family:var(--font-mono);font-size:10.5px;letter-spacing:.2em;
         text-transform:uppercase;color:var(--accent-text);margin-bottom:12px}
.form-gc{display:grid;grid-template-columns:1fr 1fr;gap:14px}
/* Groupe des numeros : un pays et SA quantite sur la meme ligne. La
   quantite est bornee a 6rem, un champ large pour « 3 » ne se lit pas
   mieux qu un etroit. */
.form-gq{display:grid;grid-template-columns:minmax(0,1fr) 6rem;gap:14px}
/* Formulaire pose SEUL dans une section (page de devis) : sans borne il
   prenait les 1320 px du conteneur, et ses champs a deux colonnes faisaient
   640 px chacun. Dans la bande de contact il est deja tenu par sa colonne,
   qui n est ni `.section` ni `.section-alt` : cette regle ne l atteint pas. */
.section .form,.section-alt .form{max-width:620px;margin-inline:auto}
.form input[type=number]{width:100%;margin-top:6px;padding:11px 13px;font:inherit;
  font-size:15px;color:var(--text);background:var(--bg);border:1px solid var(--border);
  border-radius:var(--r-sm)}
.form input[type=number]:focus-visible{outline:none;border-color:var(--aqua-700);
  box-shadow:0 0 0 3px rgba(36,211,196,.28)}
.apres-form{margin-top:20px;font-size:14px;color:var(--text-muted)}
.apres-form a{color:var(--accent-text)}

/* Le depliant du prix. Il porte le filet aqua du formulaire, en plus discret :
   c'est une invitation, pas une seconde section. Le marqueur natif du <summary>
   est remplace par un chevron, parce que le triangle par defaut n'est pas le
   meme d'un navigateur a l'autre. */
.form-plus{border-top:1px solid var(--border-soft);margin-top:20px;padding-top:16px}
.form-plus>summary{cursor:pointer;list-style:none;font-weight:600;font-size:15px;
  color:var(--accent-text);display:flex;align-items:center;gap:9px}
.form-plus>summary::-webkit-details-marker{display:none}
.form-plus>summary::before{content:"";width:7px;height:7px;flex:none;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(-45deg);transition:transform .18s ease;margin-left:2px}
.form-plus[open]>summary::before{transform:rotate(45deg)}
.form-plus>summary:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(36,211,196,.28);
  border-radius:var(--r-sm)}
.form-plus>.fine{text-align:left;margin:8px 0 16px 16px}
.form-plus .form-gc{margin-bottom:14px}
.form-plus .form-gq{margin-bottom:14px}
.form-plus .form-gt{margin-top:20px}
@media (max-width:520px){.form-l,.form-gc{grid-template-columns:1fr}.form-gq{grid-template-columns:minmax(0,1fr) 4.5rem}}

/* fil d'Ariane des pages intérieures */
.fil{font-size:13.5px;color:var(--text-muted);padding-top:26px}
.fil a{color:var(--text-muted);text-decoration:none;border-bottom:1px solid transparent}
.fil a:hover{color:var(--accent-text);border-bottom-color:currentColor}
.fil span{opacity:.5;padding:0 7px}

/* renvoi vers le guide : une page marketing doit nourrir la documentation */
.renvoi{border:1px solid var(--border);border-left:3px solid var(--aqua-500);
        border-radius:var(--r-sm);padding:18px 22px;background:var(--bg-subtle);
        display:flex;gap:16px;align-items:baseline;flex-wrap:wrap}
.renvoi b{font-weight:600}
.renvoi p{color:var(--text-muted);margin:0;flex:1;min-width:240px;line-height:1.6}

@media (max-width:900px){
  .cols3{columns:2}
}
@media (max-width:620px){
  .cols3{columns:1}
  .step{padding:20px}
}