/* ===== Widget Sommaire fléché (braillard-sommaire) =====
   Maquette Transition Workshop (échelle 1728) :
   — item impair : titre @605 (35%), pointe de flèche @710 (41.1%), texte @743 (43%)
   — item pair   : titre @743 (43%), pointe @847 (49%),            texte @880 (50.9%)
   La flèche (ligne + crochet, un seul SVG) est ancrée devant le texte et a
   une longueur FINIE (grande flèche du site, comme cover) — plus de 100vw
   ni de ligne CSS + tête recadrée (trop longue / raccord glitché, issue #61).
   ⚠️ Dans le modèle « page contenu », poser ce widget dans un conteneur SANS
   le retrait de 35 % (le widget gère ses propres retraits). */

.br-somm{
  --somm-c: #75755C;
  /* Convention du SITE (subnav.css) : le retrait des textes = 35 % de la
     largeur de contenu (100vw − 2 marges de page), soit ~523px — PAS 35 % du
     viewport (Figma ~563px). Un pas de grille = clamp(48px,8vw,138px) (comme
     le widget vidéo). Sans ça, le widget serait décalé de ~39px des textes. */
  --somm-pad: clamp(20px, 4vw, 56px);
  --somm-base: calc((100% - 2 * var(--somm-pad)) * .35);
  --somm-step: clamp(48px, 8vw, 138px);
}

/* Dans le modèle « page contenu », les widgets nus reçoivent le retrait 35 %
   (+ marge droite) du layout : on l'annule ICI — ce widget gère ses propres
   retraits en % de la pleine largeur (35 / 43 %, flèches depuis le bord). */
.elementor-widget.elementor-widget-braillard-sommaire{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.br-somm__list{ list-style: none; margin: 0; padding: 0; counter-reset: none; }

.br-somm__item{ --off: var(--somm-base); margin: 0 0 clamp(24px, 2.3vw, 40px); }
.br-somm__item--alt{ --off: calc(var(--somm-base) + var(--somm-step)); }

.br-somm__title{
  margin: 0 0 clamp(4px, .4vw, 7px);
  padding-left: var(--off);
  font-family: var(--br-font-display);
  font-style: italic; font-weight: 300;
  font-size: clamp(26px, 2.3vw, 40px);
  line-height: 1.35;
  color: var(--br-black, #000);
}
.br-somm__title a{ color: inherit; text-decoration: none; }
.br-somm__title a:hover{ opacity: .65; }

/* Rangée texte : décalée d'un cran de grille par rapport au titre. */
.br-somm__row{
  position: relative;
  padding-left: calc(var(--off) + var(--somm-step));
}
.br-somm__text{
  font-family: var(--br-font-body);
  font-size: clamp(15px, 1.15vw, 20px);
  line-height: 1.4;
  max-width: 720px;
}
/* Contenu riche (WYSIWYG) : PAS de marge haute sur le 1er <p> (la flèche se
   cale sur la première ligne, top .7em) ; listes/liens conformes charte. */
.br-somm__text p{ margin: 0 0 .5em; }
.br-somm__text p:last-child{ margin-bottom: 0; }
.br-somm__text ul, .br-somm__text ol{ margin: 0 0 .5em; padding-left: 1.1em; }
.br-somm__text li{ margin: 0 0 .2em; }
.br-somm__text a{ color: var(--br-black, #000); text-decoration: underline; }

/* Flèche : ancrée par son bord droit à ~1.9vw à gauche du texte, longueur
   finie (grande flèche du site, même clamp que cover). Centrée sur la
   PREMIÈRE ligne du texte. Le SVG contient ligne + crochet : pas de raccord. */
.br-somm__arrow{
  position: absolute;
  right: calc(100% - var(--off) - var(--somm-step) + clamp(20px, 1.9vw, 33px));
  top: .7em;
  width: clamp(70px, 8vw, 105px);
  height: auto;
  transform: translateY(-50%);
  color: var(--somm-c);
  pointer-events: none;
}
.br-somm__head{ width: 100%; height: auto; display: block; }

@media (max-width: 700px){
  .br-somm__item, .br-somm__item--alt{ --off: 0%; }
  .br-somm__row{ padding-left: 14%; }
  .br-somm__arrow{ right: calc(100% - 14% + 8px); }
}