/* ==========================================================================
   Swiss-Courtage — feuille de style unique
   --------------------------------------------------------------------------
   Reprend la typographie du theme Rhythm : Dosis en capitales espacees pour
   les titres, Open Sans pour le texte. Le site actuel charge 375 Ko de CSS
   repartis sur neuf fichiers, plus 770 Ko de JavaScript. Tout est ici.
   ========================================================================== */

:root{
  /*
   * Tous les gris sont tires du logo : #a8b3b8, un gris legerement bleute.
   * Les nuances plus sombres en sont des declinaisons, assez foncees pour
   * rester lisibles sur blanc.
   */
  /*
   * Les valeurs sont relevees sur swiss-courtage.ch, au pixel : titres en
   * #111, texte courant en #5f5f5f. C'est plus sombre que le gris du logo,
   * et c'est ce que fait votre site.
   */
  --encre:#111;          /* les titres, les liens */
  --texte:#5f5f5f;       /* le texte courant */
  --gris:#747474;       /* le texte secondaire : dates, notes, aides */
  --gris-clair:#8c8c8c;  /* DECOR uniquement : filets, puces, bordures au survol.
                            Jamais du texte : #999 ne donne que 2,85 pour 1 sur
                            blanc, sous le seuil de 3 exige meme en petit corps. */
  --trait:#e5e5e5;       /* les filets */
  --fond:#fff;
  --fond-doux:#f8f8f8;   /* la bande du pied, mesuree sur le site */
  --sombre:#1e1e1e;      /* les sous-menus */
  --accent:#17c2d6;
  --rouge:#e72835;       /* le rouge du logo */
  /*
     Le rouge de marque #e72835 vaut 4,42 contre le blanc — juste sous le
     seuil de lisibilite de 4,5. Sur une grande surface cela ne se voit pas ;
     sur un texte de 11 px en capitales, si. Meme teinte, un cran plus
     sombre : 5,20 dans les deux sens, sur blanc comme sous du blanc.
     A reserver aux petits textes et aux pastilles.
  */
  --rouge-lisible:#d3241a;
  --corail:#f4524d;      /* la bande sinistre */
  --large:1170px;        /* la largeur du .container du theme */
}

*,*::before,*::after{box-sizing:border-box}

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

body{
  margin:0;
  background:var(--fond);
  color:var(--texte);
  font:400 14px/1.6 "Open Sans",Arial,Helvetica,sans-serif;
  -webkit-font-smoothing:antialiased;
}

img{max-width:100%;height:auto;display:block}

a{color:var(--encre);text-decoration:underline}
a:hover{color:var(--gris)}
strong,b{font-weight:700;color:var(--texte)}

/* --------------------------------------------------------- la typographie */

/*
 * .font-alt du theme : Dosis, capitales, tres espacee. C'est elle qui donne
 * au site son allure — sans elle, la page ressemble a n'importe quel modele.
 */
/*
 * Deux familles, deux roles.
 *
 * Les titres courants sont en Open Sans, casse normale — c'est ce que fait
 * le theme. Seuls les titres de section et les bandeaux portent la classe
 * .alt : Dosis, capitales, tres espacee. C'est elle qui donne au site son
 * allure ; l'appliquer partout ecrasait la lecture.
 */
h1,h2,h3,h4,h5,h6{
  font-family:"Open Sans",Arial,Helvetica,sans-serif;
  font-weight:400;line-height:1.4;
  margin:0 0 1.3em;color:var(--encre);
  text-wrap:balance;
}
/*
 * Mesures faites sur la page « Assurance batiment » du site en ligne :
 *   h3  Open Sans 400, 24 px, interligne 33,6 px, marges 20 / 31,2
 *   h4  Open Sans 400, 18 px, interligne 25,2 px, marges 10 / 23,4
 * J'avais 22 px et 18 px avec un rythme different, d'ou une hierarchie
 * ecrasee : on ne distinguait plus un titre de colonne d'un intertitre.
 */
h1{font-size:32px;line-height:1.4;margin:20px 0 21px}
h2{font-size:28px;line-height:1.4;margin:20px 0 31px}
h3{font-size:24px;line-height:1.4;margin:20px 0 31px}
h4{font-size:18px;line-height:1.4;margin:10px 0 23px}
h5,h6{font-size:16px;line-height:1.4;margin:10px 0 18px}

/*
 * .alt : Dosis en capitales. Les valeurs viennent d'une mesure faite sur
 * swiss-courtage.ch — 24 px et 2 px d'interlettrage pour un titre de
 * section, 20 px et 4 px pour un bandeau. J'avais mis 30 px et 15 px, d'ou
 * cette impression de police differente.
 */
.alt,.bandeau h1{
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-weight:400;
  text-transform:uppercase;
  line-height:1.4;
}
/* le titre de section : Dosis 18 px, interlettrage 9 px — mesure */
h2.alt{font-size:18px;letter-spacing:9px;line-height:1.4;color:var(--encre);margin:0 0 50px}
h3.alt{font-size:16px;letter-spacing:6px}
h2.alt.centre{text-align:center}

/* ==========================================================================
   L'echelle typographique
   --------------------------------------------------------------------------
   Le site s'etait mis a porter cinq traitements differents pour un meme
   titre de carte — 13, 14, 15 et 16 px, trois interlettrages, deux gris —
   et deux tailles de texte courant, 15 et 16 px. Aucune de ces differences
   n'etait voulue : elles venaient de regles ecrites a des moments
   differents. Une valeur par role, nommee ici, et chaque regle s'y refere.

   Trois roles de titre, et pas un de plus :
     .alt sur un h2   le titre d'une section, en capitales tres espacees
     h3 / h4          un intertitre dans le fil du texte, en Open Sans
     titre de bloc    le titre d'une carte, d'un encadre, d'une rubrique
   ========================================================================== */
:root{
  --t-texte:16px;        /* le texte courant, partout */
  --t-note:14px;         /* une precision, une liste dense dans une carte */
  --t-mention:13px;      /* une aide de formulaire, une note de bas de bloc */

  --t-bloc:14px;         /* le titre d'une carte ou d'un encadre */
  --ls-bloc:4px;
  --t-section:18px;      /* h2.alt : le titre d'une section */
  --ls-section:9px;
}

p{margin:0 0 20px}
.corps p,.corps li,.corps td{
  font-size:var(--t-texte);font-weight:300;color:var(--texte);line-height:1.8;
}

/*
 * Le titre d'un bloc.
 *
 * Une seule declaration, partagee par les cartes d'actualite, les encadres
 * a icone, les rubriques du pied, les piliers et les blocs « en bref ».
 */
.carte h3,
.encart h3,
.rubrique h3.alt,
.pilier h3,
.bref h3{
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:var(--t-bloc);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--ls-bloc);
  color:var(--encre);
  line-height:1.7;
}
.corps p{margin:0 0 32px}
.corps strong,.corps b{font-weight:700;color:var(--texte)}
ul,ol{margin:0 0 20px;padding-left:22px}
li{margin-bottom:6px}
strong,b{font-weight:700}
hr{border:0;border-top:1px solid var(--trait);margin:40px 0}
hr.rouge{border-top:2px solid var(--rouge);margin:0}
hr.separation{max-width:var(--large);margin:0 auto}

.dedans{max-width:var(--large);margin:0 auto;padding:0 20px}

/* -------------------------------------------------------- accessibilite */

.saut{position:absolute;left:-9999px;background:var(--encre);color:#fff;
  padding:12px 20px;z-index:100;text-decoration:none}
.saut:focus{left:0;top:0}

:focus-visible{outline:2px solid var(--accent);outline-offset:3px}

/* ------------------------------------------------------------- l'en-tete */

/*
 * L'en-tete est COLLE et OPAQUE.
 *
 * Il etait blanc a 97 %. Ces 3 % de transparence suffisaient a laisser
 * transparaitre, derriere le logo et le menu, la photo du bandeau et son
 * voile noir quand la page defilait dessous : un fantome gris qui bougeait
 * sous les rubriques. Sur un menu, on ne veut rien voir passer.
 *
 * Trois pour cent ne rendaient aucun service ; on les rend au blanc.
 */
.entete{
  position:sticky;top:0;z-index:50;
  background:#fff;
  border-bottom:1px solid var(--trait);
}
.entete .dedans{
  max-width:none;margin:0 2%;
  display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.marque{padding:12px 0;flex:0 0 auto;text-decoration:none}
.marque img{width:200px;height:auto}

.navigation{display:flex;align-items:center}
.navigation ul{list-style:none;margin:0;padding:0}

.navigation>ul{display:flex;flex-wrap:wrap;align-items:center}
.navigation>ul>li{position:relative}
.navigation>ul>li>a{
  display:block;padding:26px 12px;
  /* le menu principal : #999 ne donnait que 2,85 pour 1, pour le texte le
     plus consulte du site */
  color:var(--gris);
  font-size:11px;font-weight:400;text-transform:uppercase;letter-spacing:1px;
  text-decoration:none;
  transition:color .27s cubic-bezier(0,0,.58,1);
}
.navigation>ul>li>a:hover,
.navigation>ul>li:focus-within>a{color:var(--encre)}

.reseau{
  display:inline-flex;align-items:center;justify-content:center;
  width:26px;height:26px;margin-left:14px;
  border:1px solid var(--trait);border-radius:50%;
  color:var(--gris);font:700 13px/1 Georgia,serif;text-decoration:none;
  transition:all .27s cubic-bezier(0,0,.58,1);
}
.reseau:hover{background:var(--encre);border-color:var(--encre);color:#fff}

/* la petite fleche des rubriques a tiroir */
.navigation li.a-sous>a::after{
  content:"";display:inline-block;margin-left:7px;
  border:4px solid transparent;border-top-color:currentColor;
  transform:translateY(2px);
}
.navigation .sous li.a-sous>a::after{
  border-top-color:transparent;border-left-color:currentColor;
  float:right;transform:translateY(6px);
}

/*
 * Les sous-menus. Ils s'ouvrent au survol et au clavier (:focus-within).
 * Aucun JavaScript : un menu deroulant n'en a jamais eu besoin.
 */
.navigation .sous{
  position:absolute;top:100%;left:0;
  width:230px;padding:0;
  background:rgba(30,30,30,.97);
  visibility:hidden;opacity:0;
  transition:opacity .2s ease,visibility .2s ease;
}
.navigation .sous .sous{top:0;left:100%}
.navigation li:hover>.sous,
.navigation li:focus-within>.sous{visibility:visible;opacity:1}

.navigation .sous a{
  display:block;padding:10px 18px;
  color:#b0b0b0;
  font-size:13px;line-height:1.5;
  text-decoration:none;
  border-bottom:1px solid rgba(255,255,255,.06);
}
.navigation .sous a:hover{color:#fff;background:rgba(255,255,255,.06)}

/* la fleche d'ouverture des sous-menus : elle ne sert qu'au telephone */
.pli,.fleche{display:none}

/* le bouton menu du telephone */
.bascule{display:none}
.burger{display:none;cursor:pointer;padding:14px 8px}
.burger span{display:block;width:22px;height:2px;background:var(--encre);margin:4px 0}

/* --------------------------------------------------- la banniere d'accueil */

/*
 * La banniere occupe exactement un ecran, sur chaque appareil.
 *
 * Elle etait plafonnee a 820 px : sur un grand ecran on voyait deja le
 * debut de la section suivante, et la photo paraissait rognee. Le plafond
 * saute, et la hauteur devient « l'ecran moins l'en-tete » — l'en-tete est
 * collante mais occupe sa place dans le flux, donc il faut la deduire pour
 * que les deux ensemble fassent une page pile.
 *
 * dvh plutot que vh sur les telephones : vh compte la barre d'adresse
 * comme si elle n'existait pas, si bien que le bas de la banniere se
 * cachait derriere elle. dvh suit la barre quand elle se replie.
 */
:root{
  --h-entete:106px;        /* mesure : logo + menu sur une ligne */
}
@media (max-width:900px){
  :root{ --h-entete:86px; }   /* le menu passe au bouton */
}
@media (min-width:901px) and (max-width:1099px){
  :root{ --h-entete:152px; }  /* le menu tient sur deux lignes */
}

.banniere{
  position:relative;
  height:calc(100vh - var(--h-entete));
  height:calc(100dvh - var(--h-entete));
  min-height:420px;
  display:flex;align-items:center;justify-content:center;
  text-align:center;color:#fff;
  overflow:hidden;
  background:#222;
}

/*
 * Les trois photos se relaient toutes seules, en fondu. Le site actuel fait
 * la meme chose avec 770 Ko de JavaScript ; ici c'est une animation CSS.
 */
.banniere .vue{
  position:absolute;inset:0;
  background-size:cover;background-position:center;
  opacity:0;
  animation:defile 24s infinite;
}
.banniere .vue:nth-child(1){animation-delay:0s}
.banniere .vue:nth-child(2){animation-delay:8s}
.banniere .vue:nth-child(3){animation-delay:16s}

@keyframes defile{
   0%   {opacity:0}
   4%   {opacity:1}
  33%   {opacity:1}
  37%   {opacity:0}
 100%   {opacity:0}
}

@media (prefers-reduced-motion:reduce){
  .banniere .vue{animation:none}
  .banniere .vue:nth-child(1){opacity:1}
}

.banniere .voile{position:absolute;inset:0;background:rgba(0,0,0,.7)}

.banniere .dessus{position:relative;padding:0 20px;max-width:900px}
/* la premiere ligne en Dosis, la seconde en Open Sans — comme sur le site */
.banniere .petit,
.banniere .grand{
  font-size:20px;font-weight:400;
  text-transform:uppercase;letter-spacing:4px;line-height:1.8;
  margin:0;color:#fff;
}
.banniere .petit{font-family:Dosis,"Trebuchet MS",Arial,sans-serif}
.banniere .grand{font-family:"Open Sans",Arial,sans-serif}
.banniere .petit{margin-bottom:40px}
.banniere .grand{margin-bottom:50px}

/* la fleche qui invite a descendre */
.descendre{
  position:absolute;bottom:24px;left:50%;margin-left:-20px;
  width:40px;height:40px;line-height:40px;
  color:#fff;font-size:22px;text-align:center;text-decoration:none;
  border-radius:50%;
  transition:background .3s;
}
.descendre:hover{background:rgba(255,255,255,.15);color:#fff}

/* ------------------------------------------------------------ les boutons */

.bouton,.bouton-clair{
  display:inline-block;
  padding:10px 39px;
  font-family:"Open Sans",Arial,sans-serif;
  font-size:12px;font-weight:400;
  text-transform:uppercase;letter-spacing:2px;
  text-decoration:none;
  border:2px solid transparent;
  cursor:pointer;
  transition:all .27s cubic-bezier(0,0,.58,1);
}
.bouton{background:rgba(34,34,34,.9);color:#fff}
.bouton:hover{background:var(--encre);color:#fff}

.bouton-clair{background:transparent;color:#fff;border-color:rgba(255,255,255,.75)}
.bouton-clair:hover{background:#fff;color:var(--encre)}

/* ------------------------------------------- le bandeau de titre des pages */

.bandeau{position:relative;overflow:hidden;z-index:0}
.bandeau .dedans{position:relative;padding-top:90px;padding-bottom:60px}
.bandeau h1{margin:0 0 22px;font-size:20px;letter-spacing:4px;line-height:1.8;max-width:70%}

/* les articles : pas de photo, bande gris clair */
.bandeau.clair{background:var(--fond-doux);border-bottom:1px solid var(--trait)}
.bandeau.clair .dedans{padding-top:60px;padding-bottom:45px}

/*
 * Les pages : leur photo, sous un voile noir a 50 %.
 *
 * background-attachment:fixed retient l'image pendant qu'on fait defiler.
 * Le theme obtenait cet effet avec un script de parallaxe ; deux mots de CSS
 * suffisent, et ca ne coute rien au chargement.
 */
.bandeau.photo{
  background-size:cover;
  background-position:center bottom;
  background-repeat:no-repeat;
  background-attachment:fixed;
  color:#fff;
}
.bandeau.photo .dedans{padding-top:190px;padding-bottom:150px}
.bandeau.photo h1{color:#fff}

/*
 * Sur iOS, background-attachment:fixed n'est pas honore et deforme l'image.
 * On revient a une image simplement calee.
 */
@media (hover:none){
  .bandeau.photo{background-attachment:scroll}
}
@media (prefers-reduced-motion:reduce){
  .bandeau.photo{background-attachment:scroll}
}

/* --------------------------------------------------------------- le corps */

.corps{padding:70px 20px 90px}
.corps>h2:first-child{margin-top:0}

.corps.accueil{max-width:none;padding:0}
.corps.accueil>.section{padding:90px 20px;max-width:var(--large);margin:0 auto}
.corps.accueil>.separation{margin-top:0}
.corps.accueil .banniere{margin-bottom:0}

/* le titre de section, avec son lien a droite */
.titre-section{
  display:flex;align-items:baseline;justify-content:space-between;
  gap:20px;flex-wrap:wrap;margin:0 0 50px;
}
.titre-section h2{margin:0}
.titre-section .plus{
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:4.4px;
  color:var(--gris);text-decoration:none;white-space:nowrap;
}
.titre-section .plus:hover{color:var(--encre)}

/* ----------------------------------------------------------- les articles */

.actualites{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:40px 30px;
}
.carte img{width:100%;aspect-ratio:16/9;object-fit:cover;margin-bottom:18px}
.carte h3{margin:0 0 6px}
.carte h3 a{color:inherit}
.carte h3 a{text-decoration:none}
.carte h3 a:hover{color:var(--gris)}
/*
 * La date d'un article.
 *
 * Elle etait rendue en #aaa : 2,3 pour 1 sur blanc, sous le seuil de 3
 * exige meme pour un petit texte secondaire. Le gris courant du site la
 * rend lisible sans la faire passer pour un titre.
 */
.carte .date{
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:2px;
  color:var(--gris);margin:0 0 12px;
}
.carte p{margin:0 0 14px;font-size:var(--t-texte);font-weight:300;color:var(--texte);line-height:1.7}
.carte .lire{
  display:inline-block;padding:7px 18px;
  background:#e5e5e5;border-radius:2px;
  font-family:"Open Sans",Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:2px;
  text-decoration:none;color:var(--gris);
  transition:all .27s cubic-bezier(0,0,.58,1);
}
.carte .lire:hover{background:var(--encre);color:#fff}
.carte .lire span{margin-left:4px}
.carte .date{margin:0 0 14px}   /* le reste est declare plus haut, une seule fois */

/* --------------------------------------------------------- nous contacter */

.coordonnees{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:44px 30px;
  margin:0 0 60px;
}
.contact-item{position:relative;padding-left:44px;color:var(--texte)}

/* le losange : un carre tourne de 45 degres, pas une icone a telecharger */
.losange{
  position:absolute;top:6px;left:3px;
  width:23px;height:23px;
  background:var(--encre);border-radius:2px;
  transform:rotate(45deg);
}
.losange::after{
  content:"";position:absolute;inset:0;
  transform:rotate(-45deg);
  background-repeat:no-repeat;background-position:center;background-size:12px;
}
.losange.tel::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.1 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.1.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.6 21 3 13.4 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .7-.2 1l-2.3 2.2z'/%3E%3C/svg%3E")}
.losange.mail::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 4-8 5-8-5V6l8 5 8-5v2z'/%3E%3C/svg%3E")}
.losange.ecrit::after{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2zm0 14H4V8l8 5 8-5v10z'/%3E%3C/svg%3E")}

.ci-titre{
  display:block;margin-bottom:1px;
  color:var(--gris);font-size:12px;letter-spacing:3.6px;line-height:1.6;
}
.ci-texte{display:block;font-size:var(--t-texte);font-weight:300;line-height:1.6;color:var(--texte)}
.ci-texte a{color:var(--texte);text-decoration:none}
.ci-texte a:hover{color:#000}

/* -------------------------------------------------- les blocs du contenu */

.illustration{margin:0 0 35px}
.illustration img{width:100%}

.encart{margin:0 0 25px}

/* les accordeons : des <details> natifs, sans une ligne de script */
.replis{margin:0 0 30px}
.repli{border-bottom:1px solid var(--trait)}
.repli>summary{
  cursor:pointer;padding:16px 0;list-style:none;
  font-family:Dosis,Arial,sans-serif;
  font-size:13px;text-transform:uppercase;letter-spacing:2px;
}
.repli>summary::-webkit-details-marker{display:none}
.repli>summary::after{content:"+";float:right;color:var(--gris)}
.repli[open]>summary::after{content:"–"}
.repli>*:not(summary){padding:0 0 18px}

.tableau{width:100%;border-collapse:collapse;margin:0 0 30px;font-size:13px}
.tableau th,.tableau td{border:1px solid var(--trait);padding:10px 12px;text-align:left}
.tableau th{
  background:var(--fond-doux);
  font-family:Dosis,Arial,sans-serif;
  text-transform:uppercase;letter-spacing:1px;font-weight:400;
}

.logos{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:30px;align-items:center;margin:0 0 30px;
}


.appel{
  background:var(--fond-doux);padding:50px 30px;text-align:center;margin:0 0 30px;
}

/* le contenu large deborde dans sa propre boite, jamais dans la page */
.tableau-boite{overflow-x:auto;margin:0 0 30px}

/* ----------------------------------------------------------- le formulaire */

form.contact{max-width:820px;margin:0 0 70px}
form.contact input[type=text],form.contact input:not([type]),
form.contact input[type=email],form.contact textarea{
  display:block;width:100%;margin:0 0 22px;padding:12px 14px;
  border:1px solid var(--trait);border-radius:0;background:#fff;
  font:300 15px/1.5 "Open Sans",Arial,sans-serif;color:var(--encre);
}
form.contact ::placeholder{
  /* un texte de substitution reste du texte : il doit se lire */
  color:var(--gris);font-family:Dosis,Arial,sans-serif;
  font-size:13px;text-transform:uppercase;letter-spacing:2px;
}
form.contact input:focus,form.contact textarea:focus{border-color:var(--encre);outline:none}
form.contact .deux{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}

form.contact .dispo{display:flex;flex-wrap:wrap;gap:8px 28px;margin:0 0 22px}
form.contact .dispo label{
  display:inline-flex;align-items:center;gap:9px;
  font-size:15px;font-weight:300;color:#5f5f5f;cursor:pointer;
}
form.contact .envoi{margin:0;text-align:right}
form.contact .aide{margin-top:22px;font-size:13px;color:var(--gris);font-weight:300}

/* la bande rouge vers la page des sinistres */
.bande-sinistre{margin:0 0 40px}
.bande-sinistre a{
  display:block;padding:16px 20px;
  background:var(--corail);color:#fff;
  font-size:15px;font-weight:300;text-align:center;text-decoration:none;
  transition:background .27s;
}
.bande-sinistre a::before{content:"\260E";margin-right:10px}
.bande-sinistre a:hover{background:#e0403b;color:#fff}

/* ------------------------------------------------------------- le pied */

.pied{
  background:var(--fond-doux);
  border-top:1px solid var(--trait);
  padding:60px 20px;text-align:center;
}
.pied img{margin:0 auto 30px}
.pied .bureaux{
  display:flex;flex-wrap:wrap;justify-content:center;gap:8px 26px;
  margin:0 0 24px;padding:0;list-style:none;
  font-family:Dosis,Arial,sans-serif;
  font-size:12px;text-transform:uppercase;letter-spacing:2px;color:var(--gris);
}
.pied .bureaux a{color:var(--gris);text-decoration:none}
.pied .bureaux a:hover{color:var(--encre)}
.pied .mentions{
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:2px;
  color:var(--gris);margin:0;
}

/* ----------------------------------------------------------- le telephone */

@media (max-width:991px){
  /*
   * Sans le retour a la ligne, le menu reste coince sur la ligne du logo et
   * se retrouve ecrase a quelques pixels de large. C'est exactement le bogue
   * que vous aviez au telephone sur WordPress.
   */
  .entete .dedans{flex-wrap:wrap;gap:0}
  .marque img{width:150px}
  .burger{display:block;order:3;margin-left:auto}
  /*
   * Ouvert ou ferme, sans animation.
   *
   * Une transition sur max-height reste bloquee a zero dans Chrome quand la
   * valeur d'arrivee est relative a la fenetre — le menu ne s'ouvrait pas.
   */
  .navigation{order:4;flex-basis:100%;display:none}
  .bascule:checked~.navigation{flex-direction:column;align-items:flex-start}
  .reseau{margin:16px 0}
  .bascule:checked~.navigation{display:block;max-height:78vh;overflow-y:auto}

  .navigation>ul{display:block;padding-bottom:14px}
  .navigation>ul>li>a{padding:12px 0;border-top:1px solid var(--trait)}

  /*
   * Au telephone, les sous-menus ne flottent plus : ils se deroulent dans
   * le fil. C'est le bogue que vous aviez sur WordPress.
   */
  .navigation .sous,
  .navigation .sous .sous{
    position:static;width:auto;background:none;
    visibility:visible;opacity:1;
    display:none;
  }
  .navigation .pli:checked~.sous{display:block}
  .navigation li:hover>.sous{display:none}
  .navigation .pli:checked~.sous{display:block}

  .navigation .sous a{color:var(--gris);padding:9px 0 9px 18px;border:0;
    font-size:11px;letter-spacing:1px}
  .navigation .sous .sous a{padding-left:36px}
  .navigation .sous a:hover{color:var(--encre);background:none}

  /* la fleche, a droite du lien : c'est elle qui deplie */
  .navigation li.a-sous>a::after{display:none}
  .navigation li.a-sous{position:relative}
  .navigation li.a-sous>a{padding-right:46px}
  .fleche{
    display:block;position:absolute;top:0;right:0;
    width:44px;height:44px;cursor:pointer;
  }
  .fleche::after{
    content:"";position:absolute;top:50%;right:16px;margin-top:-2px;
    border:5px solid transparent;border-top-color:var(--gris);
  }
  .pli:checked~.fleche::after{
    margin-top:-7px;border-top-color:transparent;border-bottom-color:var(--encre);
  }
  .navigation .sous .fleche{height:38px}

  h2{font-size:16px;letter-spacing:.35em;margin:50px 0 30px}
  /*
   * Sur telephone aussi, la banniere prend l'ecran entier.
   *
   * Elle valait « height:auto » avec 120 px de marge : 517 px sur un ecran
   * de 812, et l'on voyait deja le debut de la section suivante. Le texte,
   * lui, reste plus petit : il n'y a pas la place pour les grandes
   * capitales espacees du bureau.
   */
  .banniere{
    height:calc(100vh - var(--h-entete));
    height:calc(100dvh - var(--h-entete));
    min-height:420px;
    padding:40px 0;
  }
  .banniere .petit,.banniere .grand{font-size:20px;letter-spacing:.3em}
  .corps.accueil>.section{padding:60px 20px}
  .corps{padding:50px 20px 70px}
  form.contact .deux{grid-template-columns:1fr}
}

@media print{
  .entete,.pied,.descendre,.saut{display:none}
  body{font-size:11pt}
}

/* ==========================================================================
   Les effets
   --------------------------------------------------------------------------
   Apparition au defilement, survols, entree de la banniere. Le theme faisait
   la meme chose avec WOW.js, animate.css et jQuery — 312 Ko. Ici, une
   trentaine de lignes de CSS et un kilo-octet de JavaScript.

   Tout est desactive si le visiteur a demande a son systeme de limiter les
   animations : c'est un reglage d'accessibilite, pas une preference de gout.
   ========================================================================== */

/* --- l'apparition au defilement --- */

.anim{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .8s cubic-bezier(.22,.61,.36,1) var(--retard,0ms),
             transform .8s cubic-bezier(.22,.61,.36,1) var(--retard,0ms);
  will-change:opacity,transform;
}
.anim.vu{opacity:1;transform:none}

/* --- l'entree de la banniere, au chargement --- */

.banniere .petit,
.banniere .grand,
.banniere .bouton-clair{
  animation:monte 1.1s cubic-bezier(.22,.61,.36,1) both;
}
.banniere .petit{animation-delay:.15s}
.banniere .grand{animation-delay:.35s}
.banniere .bouton-clair{animation-delay:.6s}

@keyframes monte{
  from{opacity:0;transform:translateY(24px)}
  to  {opacity:1;transform:none}
}

/* la fleche qui invite a descendre, en respiration lente */
.descendre{animation:respire 2.4s ease-in-out 1.4s infinite}
@keyframes respire{
  0%,100%{transform:translateY(0);opacity:.75}
  50%    {transform:translateY(7px);opacity:1}
}

/* --- les survols --- */

/* la photo de l'article s'approche doucement */
.carte a:has(img),.carte>a{display:block;overflow:hidden}
.carte img{transition:transform 1.2s cubic-bezier(.22,.61,.36,1)}
.carte:hover img{transform:scale(1.06)}

/* le trait qui se deploie sous l'entree de menu */
.navigation>ul>li>a{position:relative}
.navigation>ul>li>a::before{
  content:"";position:absolute;left:12px;right:12px;bottom:20px;
  height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;
  transition:transform .3s cubic-bezier(.22,.61,.36,1);
}
.navigation>ul>li>a:hover::before,
.navigation>ul>li:focus-within>a::before{transform:scaleX(1)}

/* les boutons se soulevent d'un cheveu */
.bouton,.bouton-clair,.carte .lire,.bande-sinistre a{
  transition:all .3s cubic-bezier(.22,.61,.36,1);
}
.bouton:hover,.carte .lire:hover,.bande-sinistre a:hover{
  transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(0,0,0,.13);
}
.bouton-clair:hover{transform:translateY(-2px)}

/* le losange des coordonnees pivote au survol */
.losange{transition:transform .45s cubic-bezier(.22,.61,.36,1),background .3s}
.contact-item:hover .losange{transform:rotate(135deg)}
.contact-item:hover .losange::after{transform:rotate(-135deg)}
.losange::after{transition:transform .45s cubic-bezier(.22,.61,.36,1)}

/* le logo du pied et les partenaires */
.pied img{transition:opacity .3s}
.pied img:hover{opacity:.7}

@media (prefers-reduced-motion:reduce){
  .anim{opacity:1;transform:none;transition:none}
  .banniere .petit,.banniere .grand,.banniere .bouton-clair,
  .descendre{animation:none}
  .carte img,.losange,.bouton,.bouton-clair,.carte .lire{transition:none}
  .navigation>ul>li>a::before{display:none}
}

/* ==========================================================================
   La page « En cas de sinistre »
   ========================================================================== */

/*
 * Trois colonnes, et toutes les cartes calees sur la meme grille.
 *
 * Chaque assureur occupe trois rangees de hauteur identique : le logo, le
 * lien d'annonce, les numeros. Sans cela, un logo haut decalait le texte de
 * toute sa colonne et rien ne s'alignait plus d'une carte a l'autre.
 */
.assureurs{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:60px 50px;
  margin:20px 0 60px;
}
.assureur{
  display:grid;
  grid-template-rows:100px auto 1fr;
  align-content:start;
}

/* la meme boite pour tous les logos, quelle que soit l'image televersee */
.marque-logo{
  display:flex;align-items:center;justify-content:center;
  height:100px;margin:0 0 22px;
}
.marque-logo a{display:flex;align-items:center;justify-content:center;
  width:100%;height:100%}
.marque-logo img,.marque-logo picture{
  max-width:190px;max-height:70px;
  width:auto;height:auto;
  object-fit:contain;
}

.lien-sinistre{
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:3px;
  color:var(--gris);text-decoration:none;
  border-bottom:1px solid var(--trait);padding-bottom:4px;
  transition:color .27s cubic-bezier(0,0,.58,1),border-color .27s;
}
.lien-sinistre:hover{color:var(--rouge);border-bottom-color:var(--rouge)}
.lien-sinistre span{margin-left:6px}
.assureur .annonce{margin:0 0 16px}
.assureur .numeros{
  margin:0;font-size:15px;font-weight:300;color:var(--texte);line-height:2;
}
.assureur .numeros strong{font-weight:700;color:var(--texte)}

/* ==========================================================================
   Les reseaux, au pied
   ========================================================================== */

.pied .reseaux{
  display:flex;justify-content:center;gap:14px;
  margin:26px 0 0;padding:0;list-style:none;
}
.pied .reseaux a{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;
  border:1px solid var(--trait);border-radius:50%;
  color:var(--gris);
  transition:all .3s cubic-bezier(.22,.61,.36,1);
}
.pied .reseaux a:hover{
  background:var(--encre);border-color:var(--encre);color:#fff;
  transform:translateY(-3px);
}

/* ==========================================================================
   Les effets — deuxieme couche
   ========================================================================== */

/* l'en-tete se resserre des qu'on descend */
.entete{transition:box-shadow .35s ease,background .35s ease}
.entete.reduit{box-shadow:0 2px 18px rgba(0,0,0,.07)}
.entete .marque img{transition:width .35s cubic-bezier(.22,.61,.36,1)}
.entete.reduit .marque img{width:150px}
.entete.reduit .navigation>ul>li>a{padding-top:18px;padding-bottom:18px}
.navigation>ul>li>a{transition:color .27s cubic-bezier(0,0,.58,1),padding .35s cubic-bezier(.22,.61,.36,1)}

/* la barre de lecture, en haut */
.jauge{
  position:fixed;top:0;left:0;height:2px;width:100%;
  transform:scaleX(0);transform-origin:left;
  background:var(--rouge);z-index:60;
  will-change:transform;
}

/* les photos de la banniere respirent lentement */
.banniere .vue{animation:defile 24s infinite,souffle 24s infinite}
@keyframes souffle{
  from{transform:scale(1)}
  to  {transform:scale(1.09)}
}

/* les images se devoilent par un balayage */
.carte a,.illustration,.marque-logo{overflow:hidden}
.anim .illustration img,
.illustration.anim img{clip-path:inset(0 100% 0 0)}
.illustration.anim.vu img{
  clip-path:inset(0 0 0 0);
  transition:clip-path 1s cubic-bezier(.22,.61,.36,1) .1s;
}

/* les logos d'assureurs se redressent au survol */
/* les logos restent en couleur, comme sur le site : ils portent la marque */
.marque-logo img{
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.assureur:hover .marque-logo img{transform:scale(1.06)}

/* le bouton de remontee */
.remonter{
  position:fixed;right:22px;bottom:22px;
  width:44px;height:44px;line-height:42px;
  border-radius:50%;background:var(--encre);color:#fff;
  text-align:center;text-decoration:none;font-size:18px;
  opacity:0;pointer-events:none;transform:translateY(12px);
  transition:all .35s cubic-bezier(.22,.61,.36,1);
  z-index:55;
}
.remonter.visible{opacity:.85;pointer-events:auto;transform:none}
.remonter:hover{opacity:1;color:#fff;transform:translateY(-3px)}

/* les titres de section se soulignent en s'affichant */
h2.alt{position:relative;padding-bottom:16px}
h2.alt::after{
  content:"";position:absolute;left:0;bottom:0;
  width:46px;height:2px;background:var(--rouge);
  transform:scaleX(0);transform-origin:left;
  transition:transform .7s cubic-bezier(.22,.61,.36,1) .25s;
}
h2.alt.centre::after{left:50%;margin-left:-23px;transform-origin:center}
.vu h2.alt::after,h2.alt.vu::after,.titre-section.vu h2.alt::after{transform:scaleX(1)}

@media (prefers-reduced-motion:reduce){
  .banniere .vue{animation:none}
  .entete .marque img,.navigation>ul>li>a{transition:none}
  .jauge,.remonter{display:none}
  .illustration.anim img{clip-path:none}
  h2.alt::after{transform:scaleX(1);transition:none}
}

/* ==========================================================================
   Le referencement, cote lecteur
   --------------------------------------------------------------------------
   Fil d'Ariane, signature, sommaire, etiquettes, articles voisins. Chacun
   sert d'abord la lecture ; Google s'en sert ensuite.
   ========================================================================== */

.fil{max-width:var(--large);margin:0 auto;padding:18px 20px 0}
.fil ol{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.fil li+li::before{content:"›";margin-right:8px;color:var(--gris)}
.fil a,.fil span{
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:2px;
  color:var(--gris);text-decoration:none;
}
.fil a:hover{color:var(--encre)}
.fil span{color:var(--gris)}

.signature{
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:2px;
  color:var(--gris);margin:0 0 34px;
}
.signature a{color:var(--gris);text-decoration:none}
.signature a:hover{color:var(--encre)}

.sommaire{
  background:var(--fond-doux);border-left:2px solid var(--rouge);
  padding:22px 26px;margin:0 0 40px;
}
.sommaire .alt{
  font-size:11px;letter-spacing:3px;color:var(--gris);margin:0 0 12px;
}
.sommaire ol{margin:0;padding-left:20px}
.sommaire li{margin-bottom:7px}
.sommaire a{font-size:var(--t-note);font-weight:300;color:var(--texte);text-decoration:none}
.sommaire a:hover{color:var(--encre);text-decoration:underline}

/* les titres visés par le sommaire ne se cachent pas sous l'en-tete collante */
.corps h2[id]{scroll-margin-top:110px}

.etiquettes{margin:44px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:9px}
.etiquettes .alt{
  font-size:11px;letter-spacing:3px;color:var(--gris);margin-right:4px;
}
.etiquettes a{
  display:inline-block;padding:5px 13px;
  background:var(--fond-doux);border-radius:2px;
  font-size:12px;font-weight:300;color:var(--texte);text-decoration:none;
  transition:all .27s cubic-bezier(0,0,.58,1);
}
.etiquettes a:hover{background:var(--encre);color:#fff}

.voisins{margin:70px 0 0;padding-top:50px;border-top:1px solid var(--trait)}
.voisins h2.alt{font-size:18px;letter-spacing:3px;margin:0 0 34px}
.voisins h2.alt::after{display:none}

/* ==========================================================================
   Les colonnes
   --------------------------------------------------------------------------
   Le constructeur de pages posait des rangees et des colonnes ; c'est elles
   qui font qu'un texte a une image a cote, et non dessous. Deux cent
   soixante et onze colonnes etaient jetees a la conversion.
   ========================================================================== */

.rangee{
  display:flex;flex-wrap:wrap;
  gap:0 40px;
  align-items:flex-start;
  margin:0 0 10px;
}
/*
 * Les largeurs portent deux classes, comme « .rangee > .col », sinon la
 * regle generale les ecrasait et toutes les colonnes tombaient a 100 %.
 */
.rangee > .col{flex:0 1 100%;min-width:0}

.rangee > .col-1-2{flex-basis:calc(50% - 20px)}
.rangee > .col-1-3{flex-basis:calc(33.333% - 27px)}
.rangee > .col-2-3{flex-basis:calc(66.666% - 14px)}
.rangee > .col-1-4{flex-basis:calc(25% - 30px)}
.rangee > .col-3-4{flex-basis:calc(75% - 10px)}
.rangee > .col-1-6{flex-basis:calc(16.666% - 34px)}
.rangee > .col-5-6{flex-basis:calc(83.333% - 7px)}

/* la derniere image d'une colonne ne laisse pas de blanc sous elle */
.col > img:last-child,.col > p:last-child{margin-bottom:0}
.col img{width:100%}

/* le filet rouge occupe toute la largeur de la rangee */
.rangee > .col-1-1 > hr.rouge{margin:34px 0}

/* l'encart illustre : icone, titre, texte */
.encart{margin:0 0 25px;text-align:center}
.encart .icone{
  display:block;width:46px;height:46px;margin:0 auto 22px;
  color:var(--encre);
}
.encart .icone svg{width:100%;height:100%;display:block}
.encart h3{margin:0 0 18px}
.encart p{font-size:var(--t-texte);font-weight:300;color:var(--texte);line-height:1.8}

/*
 * Un titre d'encadre qui est lui-meme le lien.
 *
 * Il garde l'allure d'un titre — pas de soulignement permanent, la meme
 * couleur — et ne se signale qu'au survol et au clavier. Le survol de la
 * carte entiere colore deja l'icone : le titre suit.
 */
.encart h3 a{
  color:inherit;border-bottom:0;text-decoration:none;
  transition:color .25s;
}
.encart h3 a:hover,
.encart h3 a:focus-visible{color:var(--rouge)}
.encart:hover h3 a{color:var(--rouge)}
/*
 * Le titre et l'icone sont centres, le texte non.
 *
 * Centrer un paragraphe de six lignes ou une liste a puces se lit mal : l'oeil
 * perd le debut de chaque ligne. Le theme ne centre que l'intitule.
 */
.encart p,.encart ul,.encart ol{text-align:left}
.encart ul,.encart ol{margin:0 0 14px;padding-left:20px}
.encart li{font-size:var(--t-texte);font-weight:300;color:var(--texte);line-height:1.8;margin-bottom:6px}
.encart a{color:var(--texte)}
.encart:hover .icone{color:var(--rouge);transition:color .4s}

/* la citation d'introduction : centree, aeree, pas une citation de presse */
.corps blockquote{
  margin:0 0 40px;padding:0;border:0;
  font-size:22px;font-weight:300;line-height:1.7;
  color:var(--texte);text-align:center;
}
.corps blockquote p{font-size:inherit;margin:0 0 14px}
.corps blockquote p:last-child{margin:0}

@media (max-width:900px){
  .assureurs{grid-template-columns:repeat(2,1fr);gap:46px 34px}
}
@media (max-width:560px){
  .assureurs{grid-template-columns:1fr}
}

@media (max-width:860px){
  .rangee{gap:0}
  .rangee > .col{flex-basis:100% !important}
  .corps blockquote{font-size:19px;text-align:left}
}

/* ==========================================================================
   Le bandeau de logos qui defile
   --------------------------------------------------------------------------
   Une seule animation CSS, aucune bibliotheque. La bande contient deux fois
   la meme serie : quand la premiere sort a gauche, la seconde est exactement
   a sa place, et le raccord ne se voit pas.
   ========================================================================== */

.logos{
  position:relative;overflow:hidden;
  margin:20px 0 40px;padding:24px 0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
}
.logos .piste{
  display:flex;align-items:center;gap:64px;
  width:max-content;
  animation:defile-logos 46s linear infinite;
}
/*
 * Chaque logo occupe la meme boite, quelle que soit sa taille d'origine.
 *
 * Sans cela, un logo large et bas — Chubb, par exemple — s'etalait sur six
 * cents pixels pendant que les autres en faisaient quatre-vingts. Une boite
 * fixe de 150 sur 56, et « contain » qui inscrit l'image dedans sans la
 * deformer : plus personne ne depend de ce qui a ete televerse.
 */
.logos img{
  flex:0 0 auto;
  width:150px;max-width:150px;height:56px;
  object-fit:contain;object-position:center;
  opacity:.85;transition:opacity .3s,transform .3s;
}
.logos:hover .piste{animation-play-state:paused}
.logos img:hover{opacity:1;transform:scale(1.06)}

@keyframes defile-logos{
  from{transform:translateX(0)}
  to  {transform:translateX(-50%)}
}

@media (prefers-reduced-motion:reduce){
  .logos .piste{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
}

/* ==========================================================================
   Ce que l'editeur sait poser
   ========================================================================== */

/* les tailles de texte, nommees plutot que chiffrees */
.t-petit    {font-size:13px}
.t-normal   {font-size:15px}
.t-grand    {font-size:19px;line-height:1.7}
.t-tresgrand{font-size:24px;font-weight:300;line-height:1.6}

/* la place d'une image dans le texte */
.img-pleine img{width:100%}
.img-centre{text-align:center}
.img-centre img{display:inline-block;max-width:min(560px,100%)}
.img-gauche,.img-droite{max-width:46%}
.img-gauche{float:left;margin:6px 34px 22px 0}
.img-droite{float:right;margin:6px 0 22px 34px}
.img-gauche::after,.img-droite::after{content:"";display:block;clear:both}

/* le bloc du bouton d'action */
.corps .appel{text-align:center;background:none;padding:24px 0 10px;margin:0 0 20px}

@media (max-width:700px){
  .img-gauche,.img-droite{float:none;max-width:100%;margin:0 0 22px}
  .t-tresgrand{font-size:20px}
  .t-grand{font-size:17px}
}

/* ==========================================================================
   La finition
   --------------------------------------------------------------------------
   Rien de spectaculaire ici, et c'est voulu : le theme est sobre, noir et
   gris avec un rouge. On ne lui ajoute pas une identite, on soigne ce qui
   se lit tous les jours — le rythme, les liens, les etats, les detours.
   ========================================================================== */

::selection{background:var(--rouge);color:#fff}

html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* le lien dans le texte : un trait qui se remplit, pas un souligne fixe */
/*
 * Le lien dans le texte.
 *
 * Un souligne rouge pale des le repos : on voit que c'est cliquable sans
 * avoir a promener la souris. Au survol, le trait se remplit et le mot
 * passe au rouge.
 */
.corps p a:not(.bouton):not(.bouton-clair):not(.lire),
.corps li a,
.corps td a{
  color:var(--encre);font-weight:400;text-decoration:none;
  background-image:linear-gradient(var(--rouge),var(--rouge));
  background-size:0 2px;background-repeat:no-repeat;background-position:0 100%;
  border-bottom:1px solid rgba(231,40,53,.42);
  transition:background-size .35s cubic-bezier(.22,.61,.36,1),color .35s;
}
/*
 * Les memes exclusions qu'au-dessus.
 *
 * La regle au repos epargne les boutons ; celle-ci les avait oublies. Un
 * bouton plein passait donc au rouge au survol — rouge sur rouge sombre,
 * illisible pile au moment ou l'on s'appretait a cliquer.
 */
.corps p a:not(.bouton):not(.bouton-clair):not(.lire):hover,
.corps li a:hover,.corps td a:hover{
  background-size:100% 2px;color:var(--rouge);
}

/* le clavier doit voir ou il est, sans laideur */
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px;border-radius:2px}

/* le rythme vertical : de l'air avant un titre, moins apres */
.corps > h2{margin-top:2.6em}
.corps > h2:first-child{margin-top:0}
.corps > h3{margin-top:2em}
.corps > ul,.corps > ol{margin-bottom:1.6em}

/* les cartes se soulevent d'un rien */
.carte{transition:transform .4s cubic-bezier(.22,.61,.36,1)}
.carte:hover{transform:translateY(-4px)}

/* les accordeons respirent */
.repli{border-bottom:1px solid var(--trait);transition:background .3s}
.repli[open]{background:linear-gradient(var(--fond-doux),transparent)}
.repli > summary{
  transition:color .27s;
  display:flex;align-items:center;justify-content:space-between;gap:16px;
}
.repli > summary:hover{color:var(--rouge)}
.repli > summary::after{
  content:"+";float:none;flex:0 0 auto;
  font-size:18px;font-weight:300;color:var(--gris);
  transition:transform .3s,color .3s;
}
.repli[open] > summary::after{content:"+";transform:rotate(45deg);color:var(--rouge)}

/* les tableaux : lisibles avant d'etre jolis */
.tableau tbody tr:nth-child(even){background:#fbfbfb}
.tableau tbody tr{transition:background .2s}
.tableau tbody tr:hover{background:var(--fond-doux)}
.tableau td{font-weight:300}

/* le pied se detache un peu mieux */
.pied{padding:70px 20px 60px}
.pied img{transition:opacity .3s,transform .3s}
.pied img:hover{opacity:.75;transform:translateY(-2px)}
.pied .bureaux li{position:relative}
.pied .bureaux li + li::before{
  content:"";position:absolute;left:-14px;top:50%;
  width:3px;height:3px;border-radius:50%;background:var(--gris-clair);
}

/* la barre de defilement, discrete */
@supports (scrollbar-width: thin){
  html{scrollbar-width:thin;scrollbar-color:var(--gris-clair) transparent}
}

/* une image dans le texte n'est jamais collee au bord */
.corps img{border-radius:1px}

/* la page ne saute pas quand une barre de defilement apparait */
html{scrollbar-gutter:stable}

@media print{
  .fil,.sommaire,.voisins,.etiquettes,.jauge,.remonter{display:none}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:9pt;color:#666}
}

/* ==========================================================================
   Les formulaires qui partent tout seuls
   ========================================================================== */

/*
 * Le piege a robots.
 *
 * Invisible, mais PAS avec display:none : certains programmes le detectent
 * et sautent le champ. On le sort de l'ecran, il reste « rempli-able » pour
 * eux et inatteignable au clavier grace a tabindex="-1".
 */
.piege{position:absolute;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden}

.chapeau{
  font-size:19px;font-weight:300;line-height:1.7;
  color:var(--texte);margin:0 0 44px;max-width:44em;
}

form.rdv fieldset{
  border:0;border-top:1px solid var(--trait);
  padding:30px 0 10px;margin:0 0 20px;
}
form.rdv fieldset:first-of-type{border-top:0;padding-top:0}
form.rdv legend{
  padding:0 14px 0 0;
  font-family:Dosis,Arial,sans-serif;
  font-size:13px;text-transform:uppercase;letter-spacing:3px;color:var(--encre);
}
form.rdv label{display:block;margin:0 0 20px}
form.rdv select{
  display:block;width:100%;max-width:340px;margin-top:7px;padding:11px 13px;
  border:1px solid var(--trait);border-radius:0;background:#fff;
  font:300 15px/1.5 "Open Sans",Arial,sans-serif;color:var(--encre);
}
.oblig,.fac{
  font-family:"Open Sans",Arial,sans-serif;
  font-size:11px;text-transform:none;letter-spacing:0;font-weight:400;
  margin-left:6px;
}
.oblig{color:var(--rouge)}
.fac{color:var(--gris)}

.creneaux{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px 24px}
.creneaux label{
  display:flex;align-items:center;gap:10px;margin:0;
  font-size:15px;font-weight:300;color:var(--texte);
  text-transform:none;letter-spacing:0;cursor:pointer;
}

/* la reponse apres envoi */
.envoi-ok,.envoi-non{
  padding:16px 20px;margin:0 0 26px;
  font-size:15px;font-weight:300;line-height:1.6;
}
.envoi-ok{background:#f0f7f0;border-left:3px solid #2e7d32;color:#2b5c2e}
.envoi-non{background:#fdecec;border-left:3px solid var(--rouge);color:#a3242f}

@media (max-width:700px){
  .chapeau{font-size:17px}
  .creneaux{grid-template-columns:1fr}
}

/* les sous-rubriques, sur une page de rubrique */
.rubrique{margin:0 0 30px}
.rubrique h3.alt{
  padding-bottom:14px;margin:0 0 18px;border-bottom:1px solid var(--trait);
}
.sous-rubriques{list-style:none;margin:0;padding:0}
.sous-rubriques li{margin:0 0 11px}
.sous-rubriques a{
  font-size:var(--t-texte);font-weight:300;color:var(--texte);text-decoration:none;
  border-bottom:1px solid transparent;transition:all .27s;
}
.sous-rubriques a:hover{color:var(--rouge);border-bottom-color:var(--rouge)}
.sous-rubriques.colonnes-liste{columns:2;column-gap:44px}
@media (max-width:700px){.sous-rubriques.colonnes-liste{columns:1}}

/* ==========================================================================
   Le bandeau de consentement
   ========================================================================== */

.consentement{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  background:rgba(20,20,20,.97);color:#eee;
  box-shadow:0 -4px 24px rgba(0,0,0,.18);
  animation:monte-bandeau .45s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes monte-bandeau{from{transform:translateY(100%)}to{transform:none}}

.consentement-dedans{
  max-width:var(--large);margin:0 auto;padding:22px 20px;
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px;
}
.consentement-texte{
  margin:0;flex:1 1 380px;
  font-size:14px;font-weight:300;line-height:1.7;color:#ccc;
}
.consentement-texte strong{color:#fff;font-weight:600}

.consentement-boutons{display:flex;flex-wrap:wrap;gap:10px}
.consentement button{
  padding:10px 20px;
  border:1px solid rgba(255,255,255,.3);border-radius:2px;background:none;
  font:400 12px/1 "Open Sans",Arial,sans-serif;color:#eee;
  text-transform:uppercase;letter-spacing:1.5px;cursor:pointer;
  transition:all .27s cubic-bezier(0,0,.58,1);
}
.consentement button:hover{background:rgba(255,255,255,.12);border-color:#fff}
.consentement button.primaire{background:var(--rouge);border-color:var(--rouge);color:#fff}
.consentement button.primaire:hover{background:#c81f2b;border-color:#c81f2b}

@media (max-width:640px){
  .consentement-dedans{padding:18px 16px;gap:14px}
  .consentement-boutons{width:100%}
  .consentement button{flex:1 1 100%}
}
@media (prefers-reduced-motion:reduce){.consentement{animation:none}}

/* ==========================================================================
   Les atouts, sur la page « Qui sommes nous »
   --------------------------------------------------------------------------
   Six lignes centrees a la suite se lisent mal : l'oeil perd le debut de
   chaque ligne et rien ne ressort. En deux colonnes, avec un repere en
   tete, on voit les six d'un coup.
   ========================================================================== */

.corps .atouts{
  display:grid;grid-template-columns:1fr 1fr;
  gap:26px 44px;
  list-style:none;padding:0;
  max-width:980px;margin:0 auto 60px;
}
.corps .atouts li{
  position:relative;padding-left:38px;
  font-size:16px;font-weight:300;line-height:1.7;color:var(--texte);
  margin:0;
}
.corps .atouts li::before{
  content:"";position:absolute;left:0;top:4px;
  width:22px;height:22px;
  background:var(--rouge);border-radius:50%;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7 9 17 3.7 11.7l1.4-1.4L9 14.2l9.9-9.9 1.4 1.4z'/%3E%3C/svg%3E") center/16px no-repeat,
         linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
          mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20.3 5.7 9 17 3.7 11.7l1.4-1.4L9 14.2l9.9-9.9 1.4 1.4z'/%3E%3C/svg%3E") center/16px no-repeat,
          linear-gradient(#000,#000);
          mask-composite:exclude;
}

/* le chapeau : plus grand, centre, aere */
.corps .chapeau{
  max-width:860px;margin:0 auto 44px;
  font-size:20px;font-weight:300;line-height:1.75;
  color:var(--texte);text-align:center;
}
.corps .chapeau strong{color:var(--encre);font-weight:600}
.corps .chapeau.serre{margin-top:20px;font-size:18px}

@media (max-width:760px){
  .atouts{grid-template-columns:1fr;gap:20px}
  .corps .chapeau{font-size:17px;text-align:left}
}

/* ==========================================================================
   « Vous vous reconnaissez ? » — le passage de la lecture au contact
   --------------------------------------------------------------------------
   Le visiteur vient de lire une actualite : il est disponible, mais il ne
   sait pas encore pourquoi CELA le concerne. Quatre situations qu'on
   reconnait valent mieux qu'un argumentaire — on ne vend rien, on nomme.
   ========================================================================== */

/*
 * Le fond gris deborde sur toute la largeur, le contenu reste dans la
 * colonne du site.
 *
 * Ma premiere version enlevait la largeur maximale de la section et la
 * remettait sur chaque enfant : le titre et la grille se calaient alors a
 * gauche au lieu d'etre centres. On garde la section dans sa colonne, et
 * c'est le FOND qui deborde, par une ombre portee horizontale.
 */
.reconnaissance{
  position:relative;
  background:var(--fond-doux);
  box-shadow:-100vw 0 0 var(--fond-doux), 100vw 0 0 var(--fond-doux);
}

/*
 * Les selecteurs portent « .corps » devant.
 *
 * Sans lui, « .invitation » (une classe) perdait contre « .corps p » (deux),
 * et son « margin: 0 auto » etait ecrase par « margin: 0 0 32px » : le
 * paragraphe ne se centrait pas. Meme regle pour la grille.
 */
/*
 * Quatre situations, donc deux colonnes.
 *
 * La grille se remplissait toute seule (auto-fit) : dans mille pixels elle
 * tenait trois colonnes, et les quatre entrees tombaient en 3 + 1, la
 * derniere seule a gauche. Deux colonnes rangent quatre elements sans
 * reste, et chaque situation gagne assez de largeur pour que son titre
 * tienne sur une ligne au lieu de deux.
 */
.corps .situations{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:34px 56px;
  list-style:none;margin:0 auto 50px;padding:0;
  max-width:880px;
}
.corps .situations li{
  position:relative;padding-left:44px;
  font-size:16px;font-weight:300;line-height:1.7;color:var(--texte);
  margin:0;
}
.corps .situations strong{
  display:block;margin-bottom:4px;
  font-weight:600;color:var(--encre);line-height:1.5;
}
.corps .situations .icone{
  position:absolute;left:0;top:1px;
  width:26px;height:26px;
  display:flex;align-items:center;justify-content:center;
  color:var(--rouge);
}
.corps .situations .icone svg{width:22px;height:22px;display:block}

.corps .invitation{
  max-width:640px;margin-left:auto;margin-right:auto;margin-bottom:6px;
  font-size:var(--t-texte);font-weight:300;line-height:1.8;
  color:var(--texte);text-align:center;
}

.corps .reconnaissance .appel{background:none;padding:20px 0 0;margin:0;text-align:center}

@media (max-width:760px){
  /* « .corps » est necessaire : sans lui cette regle perd contre celle
     d'au-dessus, et le telephone gardait deux colonnes de 140 pixels */
  .corps .situations{grid-template-columns:1fr;gap:26px}
  .invitation{font-size:16px;text-align:left}
}

/* ==========================================================================
   La page « Prendre rendez-vous »
   --------------------------------------------------------------------------
   Elle est remplie par quelqu'un qui hesite. Chaque interaction repond donc
   tout de suite : un jeton coche se marque, une carte choisie se souleve,
   le bouton dit ou l'on en est. Rien ne bouge sans raison.
   ========================================================================== */

/* le fil des etapes, en tete */
/*
 * Toute la page est centree sur une colonne de 820 px.
 *
 * Un formulaire cale a gauche dans une page large laisse un grand vide a
 * droite : l'oeil ne sait plus ou se poser. On centre le fil des etapes, le
 * formulaire et la section qui suit sur la meme largeur.
 */
.corps .etapes-rdv{
  display:flex;flex-wrap:wrap;justify-content:center;gap:10px 8px;
  max-width:820px;margin:0 auto 46px;padding:0 0 22px;
  border-bottom:1px solid var(--trait);
}
.corps form.rdv{max-width:820px;margin:0 auto 70px}
.corps .rassurance{max-width:820px;margin:70px auto 0}
.etapes-rdv .etape{
  display:flex;align-items:center;gap:9px;
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:2px;
  color:var(--gris);
  transition:color .4s;
}
.etapes-rdv .etape + .etape::before{
  content:"";width:26px;height:1px;background:var(--trait);margin-right:9px;
}
.etapes-rdv b{
  display:flex;align-items:center;justify-content:center;
  width:24px;height:24px;border-radius:50%;
  border:1px solid var(--trait);
  font:400 11px/1 "Open Sans",Arial,sans-serif;
  transition:all .4s cubic-bezier(.22,.61,.36,1);
}
.etapes-rdv .etape.faite{color:var(--encre)}
.etapes-rdv .etape.faite b{background:var(--rouge);border-color:var(--rouge);color:#fff}

/* les blocs du formulaire */
form.rdv fieldset{
  border:0;border-top:1px solid var(--trait);
  padding:34px 0 6px;margin:0 0 10px;
  transition:opacity .4s;
}
form.rdv fieldset:first-of-type{border-top:0;padding-top:0}
form.rdv legend{
  display:flex;align-items:center;gap:14px;
  padding:0;margin:0 0 22px;
  font-family:Dosis,Arial,sans-serif;
  font-size:15px;text-transform:uppercase;letter-spacing:3px;color:var(--encre);
}

/*
 * Les intitules de champ.
 *
 * Ils etaient en capitales espacees, comme des titres : sur un formulaire
 * de dix champs, ca devient illisible. Casse normale, un peu plus grand, et
 * la mention « obligatoire » sur la meme ligne mais discrete.
 */
form.rdv label{
  display:block;margin:0 0 22px;
  font-family:"Open Sans",Arial,sans-serif;
  font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;
  color:var(--encre);
}
form.rdv label > input,
form.rdv label > textarea,
form.rdv label > select{
  margin-top:7px;font-weight:300;
}
form.rdv input[type=text],form.rdv input[type=tel],
form.rdv input[type=email],form.rdv input:not([type]),
form.rdv textarea{
  width:100%;padding:13px 15px;
  border:1px solid var(--trait);border-radius:3px;background:#fff;
  font:300 16px/1.4 "Open Sans",Arial,sans-serif;color:var(--encre);
  transition:border-color .25s,box-shadow .25s;
}
form.rdv input:focus,form.rdv textarea:focus{
  border-color:var(--encre);outline:none;
  box-shadow:0 0 0 3px rgba(17,17,17,.06);
}
form.rdv input:not(:placeholder-shown):valid{border-color:#bcd8bd}
form.rdv .deux{display:grid;grid-template-columns:1fr 1fr;gap:0 22px}
form.rdv legend .num{
  display:flex;align-items:center;justify-content:center;
  width:26px;height:26px;border-radius:50%;
  background:var(--encre);color:#fff;
  font:400 12px/1 "Open Sans",Arial,sans-serif;letter-spacing:0;
  transition:background .4s;
}
form.rdv fieldset.rempli legend .num{background:var(--rouge)}

/* les creneaux, en jetons qu'on coche au doigt */
.jetons{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}
.jeton{margin:0;cursor:pointer}
.jeton input{position:absolute;opacity:0;width:0;height:0}
.jeton-corps{
  display:flex;flex-direction:column;gap:2px;
  padding:14px 22px;
  border:1px solid var(--trait);border-radius:3px;background:#fff;
  transition:all .3s cubic-bezier(.22,.61,.36,1);
}
.jeton-corps strong{
  font-size:15px;font-weight:400;color:var(--encre);
  text-transform:none;letter-spacing:0;
}
.jeton-corps em{font-style:normal;font-size:12px;color:var(--gris)}
.jeton:hover .jeton-corps{border-color:var(--gris);transform:translateY(-2px)}
.jeton input:checked + .jeton-corps{
  border-color:var(--rouge);background:#fff5f5;
  box-shadow:0 4px 14px rgba(231,40,53,.13);
}
.jeton input:checked + .jeton-corps strong{color:var(--rouge);font-weight:600}
.jeton input:focus-visible + .jeton-corps{outline:2px solid var(--rouge);outline-offset:3px}

/* le lieu, en cartes */
.cartes-choix{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:14px;margin:18px 0 6px;
}
.carte-choix{margin:0;cursor:pointer}
.carte-choix input{position:absolute;opacity:0;width:0;height:0}
.carte-corps{
  display:block;height:100%;
  padding:18px 20px;
  border:1px solid var(--trait);border-radius:3px;background:#fff;
  transition:all .3s cubic-bezier(.22,.61,.36,1);
}
.carte-corps strong{
  display:block;margin-bottom:5px;
  font-size:15px;font-weight:600;color:var(--encre);
  text-transform:none;letter-spacing:0;
}
.carte-corps span{
  display:block;font-size:13px;font-weight:300;line-height:1.6;color:var(--texte);
  text-transform:none;letter-spacing:0;
}
.carte-choix:hover .carte-corps{border-color:var(--gris);transform:translateY(-3px)}
.carte-choix input:checked + .carte-corps{
  border-color:var(--rouge);background:#fff5f5;
  box-shadow:0 6px 20px rgba(231,40,53,.13);
}
.carte-choix input:focus-visible + .carte-corps{outline:2px solid var(--rouge);outline-offset:3px}

/* les sujets, en un clic */
.sujets-vite{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.sujets-vite button{
  padding:7px 15px;
  border:1px solid var(--trait);border-radius:15px;background:#fff;
  font:300 13px/1 "Open Sans",Arial,sans-serif;color:var(--texte);
  cursor:pointer;transition:all .27s cubic-bezier(0,0,.58,1);
}
.sujets-vite button:hover{border-color:var(--rouge);color:var(--rouge)}
.sujets-vite button.pris{background:var(--rouge);border-color:var(--rouge);color:#fff}

/* le bouton d'envoi */
.bouton.grand{
  padding:16px 46px;font-size:13px;letter-spacing:3px;
  position:relative;overflow:hidden;
}
.bouton.grand::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.22),transparent 70%);
  transform:translateX(-100%);
}
.bouton.grand:hover::after{animation:lueur .9s ease}
@keyframes lueur{to{transform:translateX(100%)}}
.bouton.grand[disabled]{opacity:.6;cursor:progress}
form.rdv .envoi{text-align:center;margin:36px 0 0}
form.rdv .sous-bouton{text-align:center;margin-top:14px}

/* un champ obligatoire encore vide, une fois qu'on a essaye d'envoyer */
form.rdv.verifie input:invalid,form.rdv.verifie textarea:invalid{
  border-color:var(--rouge);background:#fff8f8;
}
form.rdv .erreur-champ{
  display:block;margin-top:5px;
  font-size:12px;color:var(--rouge);
  text-transform:none;letter-spacing:0;font-weight:400;
}

/* ce qui se passe ensuite */
.rassurance{margin-top:70px}
.suite{list-style:none;counter-reset:pas;margin:0 0 30px;padding:0}
.suite li{
  counter-increment:pas;position:relative;
  padding:0 0 26px 52px;
  border-left:1px solid var(--trait);margin-left:13px;
}
.suite li:last-child{border-left-color:transparent;padding-bottom:0}
.suite li::before{
  content:counter(pas);
  position:absolute;left:-13px;top:0;
  width:26px;height:26px;border-radius:50%;
  background:var(--rouge);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font:400 12px/1 "Open Sans",Arial,sans-serif;
}
.suite strong{display:block;margin-bottom:3px;color:var(--encre);font-weight:600}
.suite span{font-size:15px;font-weight:300;line-height:1.7;color:var(--texte)}

/* la confirmation, apres l'envoi */
.merci{
  text-align:center;padding:50px 30px;
  background:#f4f9f4;border:1px solid #cfe3cf;border-radius:4px;
  margin:0 0 30px;
  animation:apparait .5s cubic-bezier(.22,.61,.36,1) both;
}
@keyframes apparait{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.merci .coche{
  width:56px;height:56px;margin:0 auto 22px;
  border-radius:50%;background:#2e7d32;color:#fff;
  display:flex;align-items:center;justify-content:center;
}
.merci .coche svg{width:30px;height:30px}
.merci h2{font-size:22px;color:#2b5c2e;margin:0 0 12px}
.merci p{font-size:16px;font-weight:300;color:#3c6b3f;margin:0 auto;max-width:460px}

@media (max-width:760px){
  .etapes-rdv{gap:8px 0}
  .etapes-rdv .etape + .etape::before{width:14px;margin-right:6px}
  .etapes-rdv .etape{font-size:10px;letter-spacing:1px}
  .jetons{gap:9px}
  .jeton-corps{padding:12px 16px}
  .cartes-choix{grid-template-columns:1fr}
  .bouton.grand{width:100%;padding:16px 20px}
}
@media (prefers-reduced-motion:reduce){
  .jeton-corps,.carte-corps,.etapes-rdv b{transition:none}
  .bouton.grand:hover::after{animation:none}
  .merci{animation:none}
}

/* ==========================================================================
   Le rythme vertical des rangees
   --------------------------------------------------------------------------
   Le constructeur de pages posait ses marges au pixel, page par page. En les
   remplacant par une regle unique, toutes les pages respirent pareil — et
   celui qui en cree une nouvelle n'a rien a regler.
   ========================================================================== */

.corps .rangee{margin:0 0 34px}
.corps .rangee:last-child{margin-bottom:0}

/* un filet rouge separe deux idees : il lui faut de l'air des deux cotes */
.corps .rangee > .col > hr.rouge{margin:26px 0 44px}

/* un titre de section suivi d'un filet : pas deux fois l'espace */
.corps h2.alt + .rangee > .col > hr.rouge{margin-top:0}

/* une colonne vide ne sert qu'a centrer : elle ne doit rien peser */
.corps .rangee > .col:empty{margin:0;padding:0;min-height:0}

/* les encadres d'une meme rangee commencent a la meme hauteur */
.corps .rangee > .col > .encart{margin-bottom:0}
.corps .rangee > .col > .encart .icone{margin-top:0}

/* un texte seul dans sa colonne centrale : de l'air autour */
.corps .rangee > .col-2-3 > p:first-child,
.corps .rangee > .col-1-1 > p:first-child{margin-top:0}

@media (max-width:860px){
  .corps .rangee{margin-bottom:24px}
  .corps .rangee > .col > hr.rouge{margin:18px 0 28px}
}

/* ==========================================================================
   Les trois piliers
   --------------------------------------------------------------------------
   Un tableau a cinq lignes se lit mal, et sur un telephone il ne se lit pas
   du tout. Trois cartes reliees par un fil disent la meme chose et se
   comparent d'un coup d'oeil — avec, en plus, ce que le tableau ne disait
   pas : qu'il s'agit d'une progression, et que seul le troisieme depend de
   vous.
   ========================================================================== */

.corps .piliers{
  position:relative;
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:26px;margin:0 0 40px;align-items:stretch;
}

/* le fil qui relie les trois : une progression, pas trois choses separees */
.corps .piliers::before{
  content:"";position:absolute;left:8%;right:8%;top:46px;height:1px;
  background:linear-gradient(90deg,var(--trait),var(--gris-clair),var(--rouge));
  z-index:0;
}

.pilier{
  position:relative;z-index:1;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid var(--trait);border-radius:4px;
  padding:30px 26px 28px;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),
             box-shadow .4s, border-color .4s;
}

/* le chiffre en filigrane, derriere le contenu */
.pilier::after{
  content:attr(data-chiffre);
  position:absolute;right:-8px;bottom:-28px;
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:132px;font-weight:300;line-height:1;letter-spacing:-4px;
  color:var(--encre);opacity:.03;
  pointer-events:none;
  transition:opacity .4s;
}
.pilier:hover::after{opacity:.06}

.pilier:hover{
  transform:translateY(-5px);
  box-shadow:0 14px 40px rgba(0,0,0,.08);
  border-color:var(--gris);
}

/* le troisieme est celui sur lequel on peut agir : il se distingue */
.pilier.p-iii{border-color:rgba(231,40,53,.35)}
.pilier.p-iii:hover{border-color:var(--rouge);box-shadow:0 14px 40px rgba(231,40,53,.13)}
.pilier.p-iii::after{color:var(--rouge);opacity:.05}

.pilier .chiffre{
  display:inline-flex;align-items:center;justify-content:center;
  width:44px;height:44px;flex:0 0 auto;
  border:1px solid var(--trait);border-radius:50%;
  background:#fff;
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:16px;font-weight:400;letter-spacing:1px;line-height:1;
  color:var(--gris);margin-bottom:20px;
  transition:all .4s cubic-bezier(.22,.61,.36,1);
}
.pilier:hover .chiffre{border-color:var(--encre);color:var(--encre)}
.pilier.p-iii .chiffre{border-color:var(--rouge);color:var(--rouge)}
.pilier.p-iii:hover .chiffre{background:var(--rouge);color:#fff}

.pilier h3{margin:0 0 8px}
.pilier .role{
  margin:0 0 24px;padding-bottom:20px;
  border-bottom:1px solid var(--trait);
  font-size:20px;font-weight:300;color:var(--encre);line-height:1.35;
}
.pilier.p-iii .role{color:var(--rouge)}

.pilier .faits{margin:0;flex:1 1 auto}
.pilier .fait{margin:0 0 16px}
.pilier .fait:last-child{margin-bottom:0}
.pilier dt{
  font-family:Dosis,Arial,sans-serif;
  font-size:10px;text-transform:uppercase;letter-spacing:2.4px;
  color:var(--gris);margin-bottom:4px;
}
.pilier dd{margin:0;font-size:15px;font-weight:300;line-height:1.65;color:var(--texte)}

.pilier .deduction{
  margin-top:24px;padding:20px 18px;
  background:var(--fond-doux);border-radius:3px;
}
.pilier .deduction-titre{
  margin:0 0 14px;
  font-family:Dosis,Arial,sans-serif;
  font-size:10px;text-transform:uppercase;letter-spacing:2.4px;color:var(--encre);
}
.pilier .deduction dd{font-weight:400;color:var(--encre)}

.corps .note-chiffres{
  max-width:640px;margin:0 auto;
  font-size:13px;font-weight:300;color:var(--gris);text-align:center;line-height:1.7;
}
.corps .note-chiffres strong{color:var(--encre);font-weight:600}

@media (max-width:900px){
  .corps .piliers{grid-template-columns:1fr;gap:16px}
  .corps .piliers::before{display:none}
  .pilier{padding:24px 22px}
  .pilier::after{font-size:96px;bottom:-20px}
  .pilier .role{font-size:18px;margin-bottom:18px;padding-bottom:16px}
}

/* ==========================================================================
   Les bandes pleine largeur
   --------------------------------------------------------------------------
   Vingt-quatre rangees de vos pages portent une couleur de fond, neuf une
   photo sous un voile sombre. Ce sont elles qui donnent le rythme : une
   bande grise pour un aparte, une photo pour annoncer une section. Sans
   elles, la page defile sans respiration.
   ========================================================================== */

/*
 * Le fond court d'un bord a l'autre, le texte reste dans la colonne.
 *
 * J'avais d'abord projete deux ombres portees de 100vw. C'etait faux : la
 * rangee fait 1130 px et l'ecran 1280, donc l'ombre decalee de 1280 px
 * atterrissait 75 px trop loin et laissait une bande vide le long de chaque
 * bord. Un calque en position absolue, large de 100vw et centre, couvre
 * exactement l'ecran quelle que soit sa largeur.
 */
.corps .rangee.bande{
  position:relative;
  padding:70px 0;   /* mesure sur le site : 70 px en haut et en bas */
  margin:60px 0;
}
.corps .rangee.bande::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background:var(--fond-bande,#bfbfbf);
  z-index:0;
}
.corps .rangee.bande > .col{position:relative;z-index:1}

/*
 * Deux fonds nommes, pour les bandes posees depuis l'editeur.
 *
 * Les bandes reprises de l'ancien site portent leur couleur dans un style
 * en ligne, parce qu'elle change d'une page a l'autre. Pour celles qu'on
 * ajoute a la main, mieux vaut une classe : l'editeur n'a alors pas besoin
 * d'ecrire de style, et le contraste avec le texte blanc reste garanti.
 */
.corps .rangee.bande.bande-grise{--fond-bande:#767676}
.corps .rangee.bande.bande-sombre{--fond-bande:#2f3437}

/*
 * Le texte des bandes est blanc.
 *
 * Sur le site d'origine, le bloc de texte pose color:#ffffff en ligne. Mon
 * menage retire les styles en ligne, donc la regle vit ici : elle vaut pour
 * la bande grise comme pour la bande photo. Seul le petit intertitre reste
 * sombre, comme sur le site.
 */
.corps .rangee.bande p,
.corps .rangee.bande li,
.corps .rangee.bande td,
.corps .rangee.bande th,
.corps .rangee.bande b,
.corps .rangee.bande strong,
.corps .rangee.bande em,
.corps .rangee.bande i,
.corps .rangee.bande span,
.corps .rangee.bande dt,
.corps .rangee.bande dd{color:#fff}

/*
 * Le petit intertitre d'une bande.
 *
 * Le site d'origine le laissait sombre parce que son gris de fond etait
 * tres clair. Maintenant que le fond est assez fonce pour porter du texte
 * blanc, un titre sombre serait le seul element illisible de la bande :
 * il passe en blanc, avec un peu de graisse pour rester un titre.
 */
.corps .rangee.bande h1,
.corps .rangee.bande h2,
.corps .rangee.bande h3,
.corps .rangee.bande h4,
.corps .rangee.bande h5,
.corps .rangee.bande h6{color:#fff}
.corps .rangee.bande:not(.bande-photo) h5,
.corps .rangee.bande:not(.bande-photo) h6{
  font-weight:600;letter-spacing:.4px;margin:0 0 16px;
}

/*
 * La bande photo.
 *
 * Un seul calque peint la photo : le ::before, qui court d'un bord a l'autre
 * de l'ecran. La rangee elle-meme ne porte que la couleur de repli, au cas
 * ou l'image manque. Peindre l'image aux deux endroits donnait deux
 * recadrages differents et une couture verticale a l'aplomb de la colonne.
 */
.corps .rangee.bande-photo{
  background-image:none;
  padding:70px 0;
  margin:140px 0;   /* le site aere davantage autour des bandes photo */
  color:#fff;
}
.corps .rangee.bande-photo::before{
  content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background-image:var(--fond-image);
  background-size:cover;background-position:center;background-repeat:no-repeat;
  background-color:var(--fond-bande,#a8b3b8);
  z-index:0;
}
.corps .rangee.bande-photo.bande-voile::after{
  content:"";position:absolute;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
  background:rgba(17,17,17,.7);z-index:0;
}
/*
 * Le titre d'une bande photo n'est pas un gros titre : le site le rend en
 * petite capitale espacee et legere, pour qu'il annonce la section sans
 * ecraser la photo.
 */
.corps .rangee.bande-photo h1,
.corps .rangee.bande-photo h2,
.corps .rangee.bande-photo h3,
.corps .rangee.bande-photo h4{
  color:#fff;
  font-family:"Open Sans",Arial,sans-serif;
  font-size:15px;font-weight:300;
  text-transform:uppercase;letter-spacing:1.2px;line-height:1.9;
  margin:0 0 18px;
}
.corps .rangee.bande-photo p,
.corps .rangee.bande-photo li{color:#fff}
.corps .rangee.bande-photo a{color:#fff;border-bottom-color:rgba(255,255,255,.5)}

@media (max-width:860px){
  .corps .rangee.bande{padding:44px 0;margin:36px 0}
  .corps .rangee.bande-photo{padding:56px 0;margin:80px 0}
}
/*
 * Pas de parallaxe sur les bandes photo.
 *
 * Avec background-attachment:fixed, le cadrage « cover » se calcule sur
 * l'ecran et non sur la bande. La photo « En cas de sinistre » fait
 * 1000 x 295 : sur un ecran de 1280 x 900 elle etait agrandie a 3051 x 900,
 * soit trois fois trop, et on n'y reconnaissait plus rien. Le site d'origine
 * pose d'ailleurs background-attachment:scroll sur ces memes sections.
 * La parallaxe reste sur les bandeaux de titre, ou elle a du sens.
 */
.corps .rangee.bande-photo::before{background-attachment:scroll}

/* ==========================================================================
   « Pour aller plus loin » — les renvois en bas de page
   --------------------------------------------------------------------------
   Deux liens nus sous un filet rouge ne donnent envie de rien. Trois cartes
   qui disent ce qu'on va y trouver, si.
   ========================================================================== */

.pour-aller-plus-loin{margin:80px 0 0;padding-top:60px;border-top:1px solid var(--trait)}
.pour-aller-plus-loin h2.alt{margin-bottom:40px}

.cartes-suite{
  display:grid;grid-template-columns:repeat(3,1fr);gap:22px;
}
.carte-suite{
  display:flex;flex-direction:column;
  padding:30px 26px 26px;
  background:#fff;border:1px solid var(--trait);border-radius:3px;
  text-decoration:none;
  transition:transform .35s cubic-bezier(.22,.61,.36,1),
             box-shadow .35s,border-color .35s;
}
.carte-suite:hover{
  transform:translateY(-4px);border-color:var(--rouge);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
}

.carte-suite .numero{
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:34px;font-weight:300;line-height:1;letter-spacing:1px;
  color:var(--trait);margin-bottom:16px;
  transition:color .35s;
}
.carte-suite .numero .sur{font-size:22px;color:var(--gris);margin:0 2px}
.carte-suite:hover .numero{color:rgba(231,40,53,.4)}

.carte-suite .titre{
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:13px;font-weight:400;
  text-transform:uppercase;letter-spacing:3px;line-height:1.6;
  color:var(--encre);margin-bottom:12px;
}
.carte-suite .texte{
  flex:1 1 auto;
  font-size:15px;font-weight:300;line-height:1.7;color:var(--texte);
  margin-bottom:20px;
}
.carte-suite .fleche{
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:2px;
  color:var(--gris);
  transition:color .35s;
}
.carte-suite:hover .fleche{color:var(--rouge)}

/* l'appel final, sur la meme page */
.appel-piliers{margin-top:70px;padding:60px 20px}

@media (max-width:900px){
  .cartes-suite{grid-template-columns:1fr;gap:16px}
  .pour-aller-plus-loin{margin-top:50px;padding-top:40px}
}

/* ==========================================================================
   3a ou 3b — le comparatif
   --------------------------------------------------------------------------
   Un tableau a neuf lignes et trois colonnes se lit mal, et sur un telephone
   il ne se lit pas du tout : on perd la colonne a laquelle appartient la
   case qu'on regarde.
   Ici, chaque critere est un bloc. Sur ecran large les deux reponses sont
   cote a cote ; sur telephone elles s'empilent, chacune gardant son
   etiquette « 3a » ou « 3b ». On ne perd jamais le fil.
   ========================================================================== */

/* les deux, en une phrase chacun */
.deux-en-bref{
  display:grid;grid-template-columns:1fr 1fr;gap:24px;margin:0 0 70px;
}
.bref{
  position:relative;padding:34px 30px 30px;
  background:#fff;border:1px solid var(--trait);border-radius:4px;
  overflow:hidden;
  transition:transform .4s cubic-bezier(.22,.61,.36,1),box-shadow .4s,border-color .4s;
}
.bref:hover{transform:translateY(-4px);box-shadow:0 14px 40px rgba(0,0,0,.08)}
.bref-a{border-color:rgba(231,40,53,.3)}
.bref-a:hover{border-color:var(--rouge)}

.bref .sigle{
  position:absolute;right:-6px;top:-18px;
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:110px;font-weight:300;line-height:1;letter-spacing:-3px;
  color:var(--encre);opacity:.045;pointer-events:none;
}
.bref-a .sigle{color:var(--rouge);opacity:.07}

.bref h3{margin:0 0 16px}
.bref p{font-size:var(--t-texte);font-weight:300;line-height:1.75;color:var(--texte);margin:0 0 16px}
.bref .pour-qui{
  margin:20px 0 0;padding-top:18px;border-top:1px solid var(--trait);
  font-size:14px;color:var(--gris);
}
.bref .pour-qui strong{color:var(--encre);font-weight:600}

/* le comparatif, critere par critere */
.comparatif{margin:0 0 20px}

.comparatif-tete{
  display:grid;grid-template-columns:1fr 1fr;gap:0 26px;
  padding:0 0 12px;margin:0 0 6px;
  border-bottom:1px solid var(--trait);
}
.comparatif-tete span{
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:3px;color:var(--gris);
}
.comparatif-tete .tete-a{color:var(--rouge)}
.comparatif-tete > span:first-child{display:none}

.critere{
  display:grid;grid-template-columns:1fr 1fr;gap:0 26px;
  padding:26px 0;border-bottom:1px solid var(--trait);
  transition:background .3s;
}
.critere:hover{background:#fcfcfc}
.critere-nom{
  grid-column:1 / -1;
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:var(--t-bloc);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--ls-bloc);
  color:var(--encre);margin:0 0 16px;
}

.cote{position:relative;padding-left:16px}
.cote::before{
  content:"";position:absolute;left:0;top:4px;bottom:4px;width:2px;
  background:var(--trait);border-radius:1px;
}
.cote-a::before{background:rgba(231,40,53,.45)}

.cote .etiquette{
  display:none;                       /* visible seulement sur telephone */
  font-family:Dosis,Arial,sans-serif;
  font-size:10px;text-transform:uppercase;letter-spacing:2px;
  color:var(--gris);margin-bottom:6px;
}
.cote .dit{font-size:15px;font-weight:300;line-height:1.7;color:var(--texte)}
.cote .dit strong,.cote .dit b{color:var(--encre);font-weight:600}
.cote .dit ul,.cote .dit ol{margin:10px 0 0;padding-left:20px}
.cote .dit li{margin-bottom:6px;font-size:var(--t-note)}
.cote .dit .cas{margin:0 0 12px;font-size:var(--t-note);line-height:1.65}
.cote .dit .cas:last-child{margin-bottom:0}
.cote .dit .cas b{
  display:block;
  font-family:Dosis,Arial,sans-serif;font-weight:400;
  font-size:11px;text-transform:uppercase;letter-spacing:2px;
  color:var(--gris);margin-bottom:2px;
}

@media (max-width:820px){
  .deux-en-bref{grid-template-columns:1fr;gap:16px;margin-bottom:50px}
  .bref{padding:26px 24px}
  .bref .sigle{font-size:82px;top:-12px}

  .comparatif-tete{display:none}
  .critere{grid-template-columns:1fr;gap:18px;padding:22px 0}
  .cote .etiquette{display:block}
}

/* le petit chevron « haut de page » du pied : il ne flotte pas, il suit le texte */
.descendre.haut-pied{position:static;display:inline-block;margin-top:10px;color:var(--gris)}

/* ==========================================================================
   Les cartes d'offres et les listes longues
   --------------------------------------------------------------------------
   Trois formules d'assurance en vis-a-vis se lisent par comparaison : il
   faut que les cartes commencent et finissent au meme endroit, sinon l'oeil
   compare des hauteurs au lieu de comparer des garanties. Le detail long
   part en dessous, sur toute la largeur, ou il a la place de respirer.
   ========================================================================== */

.corps .rangee.cartes-egales{align-items:stretch}   /* .rangee cale en haut par defaut */
.corps .rangee.cartes-egales > .col{display:flex}
.corps .rangee.cartes-egales > .col > .encart{
  display:flex;flex-direction:column;width:100%;
}

/* la liste des formules : un intitule, puis ce qu'il couvre */
.corps .formules{list-style:none;margin:0;padding:0;text-align:left}
.corps .formules li{
  margin:0;padding:14px 0;
  border-top:1px solid var(--trait);
  font-size:var(--t-note);line-height:1.75;color:var(--texte);
}
.corps .formules li:first-child{border-top:0;padding-top:6px}
.corps .formules li:last-child{padding-bottom:0}
.corps .formules b{
  display:block;
  font-family:Dosis,Arial,sans-serif;font-weight:700;
  font-size:11px;letter-spacing:2px;text-transform:uppercase;
  color:var(--encre);margin-bottom:5px;
}

/*
 * Une liste de neuf points sur 1130 pixels donnerait des lignes de deux
 * mots suivies d'un grand vide. En deux colonnes, chaque point garde une
 * longueur de lecture confortable.
 */
.corps .deux-colonnes{
  columns:2;column-gap:56px;
  max-width:920px;margin:0 auto 8px;
  text-align:left;
}
.corps .deux-colonnes li{
  break-inside:avoid;-webkit-column-break-inside:avoid;
  margin-bottom:12px;
}
/*
 * La meme liste, mais dans une carte : l'ecart entre colonnes doit se
 * resserrer, sinon les deux colonnes se touchent presque sur 545 pixels.
 */
.corps .deux-colonnes.serree{column-gap:28px;max-width:none;margin:0}

@media (max-width:860px){          /* le meme seuil que le reste du site */
  .corps .deux-colonnes{columns:1}
}

/* ==========================================================================
   Le tableau de chiffres
   --------------------------------------------------------------------------
   Un seul tableau sur le site : l'exemple de prime de la page RCMO. Il
   portait ses reglages en attributs HTML de 1998 (border, cellpadding,
   width) et alignait ses montants avec des <div align="right">. Tout cela
   appartient a la feuille de style.
   ========================================================================== */

.corps table.chiffres{
  border-collapse:collapse;
  width:100%;max-width:440px;
  margin:8px 0 4px;
}
.corps table.chiffres td{
  padding:11px 4px;
  border-bottom:1px solid var(--trait);
  font-size:15px;
}
.corps table.chiffres td + td{
  text-align:right;
  font-variant-numeric:tabular-nums;   /* les montants s'alignent chiffre a chiffre */
  white-space:nowrap;
  color:var(--encre);
}
.corps table.chiffres tr:last-child td{border-bottom:0;font-size:13px;color:var(--gris)}

/* ==========================================================================
   La page Contact
   --------------------------------------------------------------------------
   Deux questions, deux blocs. « Qui j'appelle ? » : les quatre bureaux,
   tous batis pareil, le numero en evidence parce que c'est le seul geste
   qui compte sur un telephone. « Comment j'ecris ? » : le formulaire, avec
   a cote les courriels, l'adresse postale et le rendez-vous. Avant, les
   sept elements etaient melanges dans une grille de quatre qui tombait
   en 4 + 3.
   ========================================================================== */

.corps .bureaux-contact{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:20px;
  list-style:none;margin:0 0 10px;padding:0;
}
.corps .bureau{
  margin:0;padding:26px 22px 24px;
  border:1px solid var(--trait);
  background:#fff;
  text-align:center;
  transition:border-color .3s,transform .3s;
}
.corps .bureau:hover{border-color:var(--gris-clair);transform:translateY(-3px)}

.bureau-canton{
  display:block;
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:2.4px;
  color:var(--gris);margin-bottom:8px;
}
.bureau-ville{
  display:block;
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:var(--t-bloc);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--ls-bloc);
  color:var(--encre);margin-bottom:14px;
}
.bureau-tel{
  display:inline-block;
  font-size:17px;font-weight:300;
  color:var(--encre);text-decoration:none;
  border-bottom:1px solid transparent;
  white-space:nowrap;
  transition:color .25s,border-color .25s;
}
.bureau-tel:hover,.bureau-tel:focus-visible{
  color:var(--rouge);border-bottom-color:var(--rouge);
}

/* le formulaire et sa colonne d'appoint */
.corps .contact-duo{align-items:flex-start;margin-bottom:44px}
.corps .contact-duo form.contact{max-width:none;margin:0}

/*
 * Un champ porte desormais une etiquette visible.
 *
 * Le texte de substitution servait d'etiquette : il disparait des qu'on
 * tape, et on ne sait plus ce qu'on remplit. L'etiquette reste.
 */
form.contact .champ{margin:0 0 18px}
form.contact .champ label{
  display:block;margin-bottom:7px;
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:11px;font-weight:400;
  text-transform:uppercase;letter-spacing:2.4px;
  color:var(--gris);
}
form.contact .champ abbr{
  margin-left:4px;color:var(--rouge);text-decoration:none;border:0;
}
form.contact .champ input,
form.contact .champ textarea{margin:0}
form.contact .deux.etroit-large{grid-template-columns:1fr 2fr}

form.contact fieldset.dispo{
  border:1px solid var(--trait);
  padding:14px 18px 16px;
  margin:4px 0 22px;
}
form.contact fieldset.dispo legend{
  padding:0 8px;
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:2.4px;
  color:var(--gris);
}
form.contact .envoi{text-align:left}

/* la colonne d'appoint */
.aside-contact{display:flex;flex-direction:column;gap:18px}
.ac-bloc{
  padding:22px 22px 18px;
  border:1px solid var(--trait);
  background:var(--fond-doux);
}
.corps .ac-bloc h3{
  font-family:Dosis,"Trebuchet MS",Arial,sans-serif;
  font-size:var(--t-bloc);font-weight:400;
  text-transform:uppercase;letter-spacing:var(--ls-bloc);
  color:var(--encre);margin:0 0 14px;
}
.corps .ac-bloc p{margin:0 0 14px;line-height:1.7}
.corps .ac-bloc p:last-child{margin-bottom:0}
.corps .ac-bloc a{color:var(--encre)}
.ac-note{
  display:block;margin-top:2px;
  font-size:var(--t-mention);color:var(--gris);
}
.ac-rdv{background:#fff;border-color:var(--encre)}
.corps .ac-rdv a.bouton-clair{margin-top:4px}

@media (max-width:980px){
  .corps .bureaux-contact{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:860px){
  .corps .contact-duo{display:block}
  .corps .contact-duo .col{width:auto}
  .aside-contact{margin-top:32px}
}
@media (max-width:560px){
  .corps .bureaux-contact{grid-template-columns:1fr}
  form.contact .deux,
  form.contact .deux.etroit-large{grid-template-columns:1fr}
}

/* ==========================================================================
   La page « Actualités »
   --------------------------------------------------------------------------
   Dix-huit articles etales sur douze ans. Si tout a la meme taille, rien ne
   dit par ou commencer : on met donc le plus recent en grand, on offre les
   rubriques comme filtres, et on range le reste par annee.
   ========================================================================== */

/* --------------------------------------------------------------- la une */
.une{margin:0 0 46px}

.carte-une{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr 1fr;
  align-items:center;
  gap:0;
  background:var(--fond-doux);
  border:1px solid var(--trait);
  border-radius:3px;
  overflow:hidden;
}
.carte-une-image{overflow:hidden;line-height:0;height:100%}
.carte-une-image img{
  width:100%;height:100%;
  aspect-ratio:16/9;object-fit:cover;
  transition:transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.carte-une:hover .carte-une-image img{transform:scale(1.04)}
.carte-une-texte{padding:38px 40px}

/*
   LA SPECIFICITE, ET POURQUOI « p. » DEVANT LA CLASSE.
   Le site pose « .corps p { color:var(--texte) } » — deux classes, donc plus
   fort qu'une classe seule. Mon « .etiquette-une{color:#fff} » perdait, et le
   badge s'affichait en gris sur rouge : un contraste de 1,45 pour un seuil
   de 4,5. Illisible. « .corps p.etiquette-une » remet les choses d'aplomb.
*/
.corps p.etiquette-une{
  display:inline-block;margin:0 0 14px;padding:5px 12px;
  background:var(--rouge-lisible);border-radius:2px;
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:#fff;
}
.carte-une h2{
  margin:0 0 10px;
  font-size:26px;line-height:1.35;letter-spacing:0;
}
.carte-une h2 a{color:var(--encre);text-decoration:none}
.carte-une h2 a:hover{color:var(--rouge)}
/* --gris (#747474) sur le fond doux ne donne que 4,40 : on prend --texte */
.corps .carte-une .date{
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;text-transform:uppercase;letter-spacing:2px;
  color:var(--texte);margin:0 0 14px;
}
.carte-une .extrait{
  margin:0;font-size:var(--t-texte);font-weight:300;
  line-height:1.75;color:var(--texte);
}

/* ----------------------------------------------------------- les filtres */
/*
   Ce sont de vrais liens vers de vraies pages : le lecteur filtre, Google
   explore, et rien ne s'execute. Un filtre en JavaScript aurait ete
   invisible pour Google et aurait casse le bouton « precedent ».
*/
.filtres{
  display:flex;flex-wrap:wrap;align-items:center;gap:9px;
  padding:0 0 26px;margin:0 0 12px;
  border-bottom:1px solid var(--trait);
}
.filtres-titre{
  margin-right:6px;
  font-family:Dosis,Arial,sans-serif;
  font-size:var(--t-bloc);letter-spacing:var(--ls-bloc);
  text-transform:uppercase;color:var(--gris);
}
.filtre{
  display:inline-flex;align-items:center;gap:7px;
  padding:8px 15px;
  border:1px solid var(--trait);border-radius:999px;
  background:#fff;text-decoration:none;
  font-size:14px;color:var(--texte);
  transition:all .25s ease;
}
.filtre span{
  font-size:11px;font-weight:600;color:var(--gris);
  font-variant-numeric:tabular-nums;
}
.filtre:hover{border-color:var(--gris);color:var(--encre)}
.filtre.actif{background:var(--encre);border-color:var(--encre);color:#fff}
.filtre.actif span{color:rgba(255,255,255,.65)}

/* ------------------------------------------------------ la suite de la liste */
.suite{margin:34px 0 0}
.suite > h2{
  margin:0 0 22px;
  font-size:var(--t-section);letter-spacing:var(--ls-section);
  color:var(--gris);
}

/* ------------------------------------------------------------ les cartes */
.carte{position:relative}
/*
   Le rouge du site (#e72835) sur blanc donne 4,42 — juste sous le seuil de
   4,5. Sur un texte de 11 px en capitales, cette marge n'est pas theorique.
   On garde la teinte et on descend la luminosite : 5,20.
   La regle vaut aussi pour la une, qui n'etait pas couverte.
*/
.corps .carte .rubrique,
.corps .carte-une .rubrique{
  margin:0 0 7px;
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  color:var(--rouge-lisible);
}
/*
   TOUTE LA CARTE EST CLIQUABLE, AVEC UN SEUL LIEN.
   Le « ::after » etale le lien du titre sur la carte entiere. Le lecteur
   clique ou il veut ; Google, lui, ne lit qu'un lien — celui du titre, dont
   le texte dit enfin de quoi parle la page d'arrivee.
*/
/*
   La carte a la une etait cliquable sur son seul titre : trois cents pixels
   utiles sur une carte qui en fait mille. Le meme « ::after » que sur les
   petites cartes l'etale sur toute la surface — un seul lien, toute la carte.
*/
.carte h3 a::after,
.carte-une h2 a::after{content:"";position:absolute;inset:0;z-index:1}
.carte .extrait,
.carte-une .extrait{position:relative;z-index:0}

/* on montre que c'est cliquable */
.carte-une:hover h2 a{color:var(--rouge-lisible)}

@media (max-width:820px){
  .carte-une{grid-template-columns:1fr}
  .carte-une-texte{padding:26px 24px 30px}
  .carte-une h2{font-size:22px}

  /*
     Sur telephone, les pastilles se repliaient sur trois lignes : 162 px de
     haut avant le premier article. On les met sur une seule ligne qui glisse
     du doigt — le geste attendu, et la page commence plus haut.

     Le debordement reste DANS la barre : le corps de la page ne defile
     jamais lateralement.
  */
  .filtres{
    flex-wrap:nowrap;overflow-x:auto;gap:8px;
    padding-bottom:16px;margin-bottom:18px;
    scroll-snap-type:x proximity;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .filtres::-webkit-scrollbar{display:none}
  .filtres-titre{display:none}
  .filtre{flex:0 0 auto;scroll-snap-align:start}
}

/* ==========================================================================
   L'abonnement aux actualités
   --------------------------------------------------------------------------
   Un panneau sombre, seul de son espèce sur le site : c'est la seule chose
   qu'on demande au lecteur sur cette page, et elle doit se voir sans crier.
   Le texte à gauche dit pourquoi, le formulaire à droite dit comment — deux
   colonnes, parce qu'une pleine largeur faisait courir les lignes sur quinze
   centimètres.

   Les sept réponses possibles sont écrites dans la page, cachées. Le fragment
   de l'adresse (#abo-ok) fait apparaître la bonne, par « :target ». C'est la
   seule chose que le CSS sache lire d'une adresse — et il lit le fragment,
   jamais la chaîne de requête.
   ========================================================================== */
.abonnement{margin:56px 0 0}

/* ------------------------------------------------------- les réponses */
.abo-reponse{display:none}
.abo-reponse:target{
  display:block;
  margin:0 0 22px;padding:16px 20px;
  border-radius:4px;border-left:3px solid;
  font-size:var(--t-texte);line-height:1.65;
}
.corps .abo-reponse:target.bon{
  background:#eef7f0;border-color:#2f7d4a;color:#1c5230;
}
.corps .abo-reponse:target.mal{
  background:#fdf0ef;border-color:var(--rouge-lisible);color:#8c2018;
}

/* ------------------------------------------------------- le panneau */
.abo-corps{
  display:grid;grid-template-columns:1fr 1fr;
  gap:44px;align-items:start;
  padding:44px 46px;
  background:var(--sombre);
  border-radius:4px;
}

/* « .corps .abo-dire p » vaut deux classes plus un element : une classe seule
   ne pouvait pas gagner, et le sur-titre restait gris au lieu de rouge. */
.corps .abo-dire .abo-sur{
  margin:0 0 10px;
  font-family:Dosis,Arial,sans-serif;
  font-size:11px;font-weight:700;letter-spacing:3px;text-transform:uppercase;
  color:#f07c72;                        /* le rouge s'éclaircit sur fond noir */
}
.corps .abo-corps h2{
  margin:0 0 14px;
  font-size:24px;letter-spacing:5px;line-height:1.3;
  color:#fff;
}
.corps .abo-dire p{
  margin:0 0 14px;max-width:40ch;
  font-size:var(--t-texte);font-weight:300;line-height:1.75;
  color:#d6d6d6;
}
.corps .abo-dire strong{color:#fff;font-weight:600}
.corps .abo-dire .abo-note{
  margin:18px 0 0;padding-top:16px;
  border-top:1px solid #333;
  font-size:13px;line-height:1.7;color:#9a9a9a;
}

/* ------------------------------------------------------- le formulaire */
.abo-form{margin:0}
.abo-champ{display:block;margin:0 0 16px}
.corps .abo-champ .intitule{
  display:block;margin-bottom:9px;
  font-family:Dosis,Arial,sans-serif;
  font-size:var(--t-bloc);letter-spacing:var(--ls-bloc);
  text-transform:uppercase;color:#9a9a9a;
}
/* le champ et le bouton ne font qu'un objet : rien ne flotte entre les deux */
.abo-ligne{display:flex;gap:0}
.corps .abo-ligne input[type=email]{
  flex:1 1 auto;min-width:0;margin:0;
  padding:14px 16px;
  background:#fff;border:1px solid #fff;border-right:0;
  border-radius:3px 0 0 3px;
  font-size:15px;color:var(--encre);
}
.corps .abo-ligne input[type=email]::placeholder{color:#9a9a9a}
.corps .abo-ligne input[type=email]:focus{
  outline:2px solid #f07c72;outline-offset:-2px;
}
.corps .abo-ligne button{
  flex:0 0 auto;margin:0;
  padding:14px 26px;
  background:var(--rouge-lisible);color:#fff;
  border:1px solid var(--rouge-lisible);border-radius:0 3px 3px 0;
  font-family:Dosis,Arial,sans-serif;
  font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;
  cursor:pointer;transition:background .2s;
}
.corps .abo-ligne button:hover{background:#b81b26;border-color:#b81b26}

.abo-accord{
  display:flex;gap:11px;align-items:flex-start;
  margin:0;font-size:13.5px;line-height:1.65;color:#9a9a9a;cursor:pointer;
}
.abo-accord input{flex:0 0 auto;margin:3px 0 0;width:auto;accent-color:#d3241a}
.abo-accord:hover span{color:#c2c2c2}

@media (max-width:900px){
  .abo-corps{grid-template-columns:1fr;gap:30px;padding:32px 26px}
  .corps .abo-dire p{max-width:none}
}
@media (max-width:460px){
  /* sous cette largeur, le bouton collé rétrécit le champ à rien */
  .abo-ligne{flex-direction:column;gap:10px}
  .corps .abo-ligne input[type=email]{border-right:1px solid #fff;border-radius:3px}
  .corps .abo-ligne button{border-radius:3px;padding:13px 20px}
}

/* ==========================================================================
   « Rester à jour », en fin d'article
   --------------------------------------------------------------------------
   Fermé, il tient sur une ligne et ne dérange personne. Ouvert, il donne le
   formulaire sur place — sans quitter l'article, et sans JavaScript.
   ========================================================================== */
.rester{
  margin:44px 0 0;
  background:var(--fond-doux);
  border:1px solid var(--trait);
  border-radius:4px;
  overflow:hidden;
}
.rester > summary{
  display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 16px;
  padding:20px 24px;
  cursor:pointer;list-style:none;
  transition:background .2s;
}
.rester > summary::-webkit-details-marker{display:none}
.rester > summary:hover{background:#f2f2f2}
.rester > summary:focus-visible{outline:2px solid var(--rouge-lisible);outline-offset:-2px}

.rester-titre{
  font-family:Dosis,Arial,sans-serif;
  font-size:15px;font-weight:600;letter-spacing:3px;text-transform:uppercase;
  color:var(--encre);
}
/* le chevron, qui pivote à l'ouverture */
.rester-titre::before{
  content:"›";
  display:inline-block;margin-right:10px;
  font-size:19px;line-height:1;color:var(--rouge-lisible);
  transition:transform .2s;
}
.rester[open] .rester-titre::before{transform:rotate(90deg)}
.rester-note{
  flex:1 1 260px;
  font-size:14px;font-weight:300;line-height:1.6;color:var(--texte);
}

.rester-form{
  padding:0 24px 24px;
  border-top:1px solid var(--trait);
  margin-top:0;padding-top:20px;
}
/* ici le fond est clair : le champ prend un vrai contour */
.corps .rester-form .abo-ligne input[type=email]{
  border:1px solid var(--trait);border-right:0;background:#fff;
}
.corps .rester-form .abo-accord{margin-top:14px;color:var(--gris)}
.corps .rester-form .abo-accord:hover span{color:var(--texte)}

@media (max-width:560px){
  .rester > summary{padding:16px 18px}
  .rester-form{padding:18px 18px 20px}
}

/* les deux liens légaux, au pied de chaque page */
.pied-legal{
  list-style:none;display:flex;flex-wrap:wrap;justify-content:center;
  gap:8px 26px;margin:22px 0 0;padding:18px 0 0;
  border-top:1px solid rgba(255,255,255,.14);
}
.pied-legal a{
  font-size:13px;color:var(--gris);text-decoration:none;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.pied-legal a:hover{color:var(--encre);border-bottom-color:currentColor}

/* les fiches « terme / valeur » des pages légales */
.corps .fiche-legale{
  display:grid;grid-template-columns:minmax(180px,auto) 1fr;
  gap:10px 28px;margin:0 0 26px;max-width:760px;
}
.corps .fiche-legale dt{
  font-family:Dosis,Arial,sans-serif;
  font-size:var(--t-bloc);letter-spacing:2px;text-transform:uppercase;
  color:var(--gris);padding-top:2px;
}
.corps .fiche-legale dd{margin:0;color:var(--encre);line-height:1.7}
.corps .mention-maj{
  margin-top:38px;padding-top:18px;border-top:1px solid var(--trait);
  font-size:13px;color:var(--gris);
}
@media (max-width:640px){
  .corps .fiche-legale{grid-template-columns:1fr;gap:4px 0}
  .corps .fiche-legale dd{margin-bottom:14px}
}